與Snap.svg動畫圖標的奇怪行爲

我試圖用Snap.svg動畫搜索圖標。您可以看到here on my Codepen，搜索圖標。與Snap.svg動畫圖標的奇怪行爲

我用變換的規模有我的圖標，每一次點擊「反彈」：loupe.animate({transform: 's1.2s.8'},300,mina.easeout);

動畫運行良好，除了在第一次點擊，它只是按比例縮小，然後在第二次點擊的效果是好的。

與刷新圖標（在筆的底部）相同的行爲，旋轉動畫在第一次點擊時以錯誤的意義轉動雖然我在動畫之前重置了轉換。

我想也許我的圖標沒有縮放和旋轉在第一次點擊之前的好位置，但我無法找到我可以檢查/設置的位置。

非常感謝您的幫助！

雨果

來源

2015-08-28 Hugo

使用絕對值用大寫字母：

loupe.animate({transform: 'S1.2S.8'},300,mina.easeout);

來源

2015-09-02 00:40:09

我試過了，但仍然在第一次點擊時得到了動畫，出現了一個錯誤的行爲。然後在其他點擊上，動畫運行良好。 – Hugo

然後我的預感說問題在代碼中的其他地方。此特定行應按原樣工作。你可以包含一些代碼嗎？ –

是的，你可以找到這個codepen上的代碼（包括在我的第一篇文章中）：http://codepen.io/Hugo8705/pen/MagpQb – Hugo

對於刷新圖標，從R180旋轉變化來R-180和R360至R0。這似乎一直工作。

clicRefresh = function() { 
    fleche.stop().animate({transform: 'S.6,.6 R-180 114.75 122.5'}, 400, mina.easeout, function() { 
      fleche.stop().animate({transform: 'S1,1 R0 114.75 122.5'}, 600, mina.easeout); 
     }); 
};

來源

2016-02-10 18:16:32 ironoxidey

與Snap.svg動畫圖標的奇怪行爲

回答

相關問題