Snap SVG 顺序动画无法按预期工作

Question

我想按顺序为正方形设置动画，首先顺时针旋转 90 度，然后进行简单的 x 轴平移。这是我使用 Snap 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 );

Raphael 过去允许使用 t 与 T 进行相对变换，但在 Snap 中并非如此。

因此，如果您省略了 r90,100,200，它会假设您想要旋转回 0，因为它不再被设置。请注意，它比这更复杂一些，因为在幕后 Snap 将使用矩阵，但这可能是最好的思考方式。

因此，在进行任何后续动画时，使用平移、旋转、缩放来构建变换字符串。