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的背后将使用矩阵，但它可能是最好的考虑方法。

因此，建立您的转换字符串与您的翻译，旋转，缩放，为您的任何后续动画。