什麼是使用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動畫位置的正確方法

回答

相關問題