使用svg.js設置位置動畫的正確方法是什么

Question

我創建了一個路徑（可以很好地渲染）。 幾秒鍾后，我只是希望它垂直向上移動 。

根據文檔，我已經能夠為路徑設置動畫，但是它並沒有像我期望的那樣移動。 路徑會向右跳，並沿對角線移動 ，與平滑的垂直過渡相對 。 這是我的代碼：

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

誰能指出是什么原因造成的？

我在JSFiddle中也對此進行了概述： http : //jsfiddle.net/Dwf3Z/

Answer 1

路徑本身通常會產生偏移，從而產生有偏差的翻譯。 最簡單的方法是將路徑歸為一組。

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

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