Snap SVG順序動畫無法按預期工作

Question

我想按順序動畫一個正方形，首先順時針旋轉90度，然後進行簡單的x軸平移。這是我一直在使用捕捉SVG Javascript代碼

r.animate({ transform: 'r90, 100, 200' }, 1000, mina.easein, function() {  
    r.animate({transform: 't 100 0'}, 1000, mina.easein); 
    } 
); 

典筆可以在這裏找到：https://codepen.io/gauravsingh_/pen/xOVGar

旋轉都按預期的，但是翻譯是有問題的和意外。

有人可以請看看並描述這裏出了什麼問題嗎？

Answer 1

問題是轉換不是累積的，所以你需要每次表達完整的轉換。

所以對於第二個回調變換就需要這裏面......

r.animate({transform: 't 100 0r90,100,200'}, 1000, mina.easein); 

拉斐爾用來允許採用t VS牛逼相對變換，但這不是在捕捉的情況。

因此，如果您不考慮r90,100,200，它會假定您想要旋轉回0，因爲不再設置。請注意，它比這更復雜一點，因爲Snap的背後將使用矩陣，但它可能是最好的考慮方法。

因此，建立您的轉換字符串與您的翻譯，旋轉，縮放，爲您的任何後續動畫。