在道具更改时处理 SVG 动画的最佳方法是什么？答案

【问题标题】：Whats the best way to handle SVG animations on prop change?在道具更改时处理 SVG 动画的最佳方法是什么？
【发布时间】：2015-10-08 08:31:36
【问题描述】：

我有以下两个 ReactJS 组件：

MyGraphThingy，它充当实际元素的容器。它渲染成一个 svg 元素，其中包含子元素。

MyGraphElement，渲染成一个圆圈。

在第三个组件中，渲染方法返回以下内容：

<MyGraphThingy><MyGraphElement position={this.getPosition()/></MyGraphThingy>

其中 getPosition() 取决于组件状态。所以如果组件的相关状态发生变化，SVG圆的位置也应该发生变化。

问题是，实现动画的最佳方式是什么，而不是圆从一个地方跳到另一个地方，而是平滑过渡？

圆圈只是一个示例，实际用例涉及为几乎所有 SVG 属性设置动画。

不，我不想依赖 D3，是的，理想情况下，我希望在由属性更改触发的 MyGraphThingy 中处理此问题，而不是使用 react-animate 之类的模块。我可能应该在其中使用一些生命周期方法，但是如何实现实际的动画是我想知道的。

【问题讨论】：

【解决方案1】：

看看网络动画：

【讨论】：

网络动画不依赖于 react 或任何其他框架。这只是为元素的属性和属性设置动画的一种方式。 animate 是一个可以在任何元素上调用的函数。 f.e.在 changePosition() 你可以做 yourCircle.animate(...)。如果您提供更多代码，我可以告诉您更多有关将动画放置在何处的信息。