Svg动画对象跟随路径

Question

我正在尝试使一个对象（一个圆圈）跟随一个svg路径（我成功完成了这个）但我希望这个对象最小化它到达一些坐标然后再次自动调整到他的半径并完成它并结束。我怎么能这样做？

Answer 1

如果您愿意使用库，请使用Greensock和morphSVG插件执行此操作。它们可以轻松地沿路径动画元素。您可以使用pathDataToBezier方法从现有路径提供路径数据，然后沿该路径设置任何对象的动画。它甚至可以根据当前的方向自动旋转。

你需要TweenMax或TweenLite，它是基本的补间库，然后是morphSVG插件来完成工作。您可能也想要其他一些内容，例如DrawSVG和Attr plugin。

它还具有各种触发事件，例如onUpdate，onStart和onComplete，因此可以随时随地进行补间。

http://codepen.io/anon/pen/VerMWX
http://greensock.com/forums/topic/13581-animate-svg-object-along-motion-path/