什么是使用svg.js动画位置的正确方法

我已经创建了一个路径（渲染正常）。几秒钟后，我只是想要这个垂直移动。什么是使用svg.js动画位置的正确方法

继documentation后，我已经能够对路径进行动画制作，但它并没有像我期望的那样移动。 路径跳到右边&对角线移动移动到一个平滑的垂直过渡。这里是我的代码：

hero = draw.path(pHero).center(310,200).animate(2000, '>', 1000).center(310,100);

任何人都可以指出是什么原因造成的？

我在的jsfiddle概括这个问题，以及：http://jsfiddle.net/Dwf3Z/

来源

2013-06-25 Sheixt

路径的往往有偏差自己创造偏压翻译。最简单的出路是将路径放在一个组中。

hero = draw.group() 
hero.path(pHero) 
hero.center(310,200).animate(2000, '>', 1000).center(310,100)

这里是你的小提琴的修改后的版本：http://jsfiddle.net/Dwf3Z/1/

来源

2013-06-25 17:31:56 wout

谢谢:)快速的问题。什么是更好的方式来动画多个属性？是否将'.center（）。size（）'或全部链接到'.attr（{}）'或者应该在动画中使用'during'来完成？ – Sheixt

这就是你喜欢的。用'attr（）'你更接近svg，所以你必须知道你在做什么。 size（）和move（）是方便的方法，可以在不同的元素类型之间提供统一的API。但是，只要你喜欢''animate（）''，你可以链接许多方法。以下示例将移动，调整大小并填充元素：'rect.animate（）。x（100）.size（400,500）.cy（100）.fill（'＃f09'）'。 – wout

这是一个小提琴：http://jsfiddle.net/wout/kdbHa/1/ – wout

什么是使用svg.js动画位置的正确方法

回答

相关问题