使用snap.svg旋转已存在旋转的SVG元素

Question

当我使用snap.svg为​​已经旋转的元素设置旋转动画时，我会遇到各种各样的问题。

http://codepen.io/anon/pen/aOrrVz

var s = Snap.select("#Layer_1");
var rect1 = s.select("#rect1");
var rect2 = s.select("#rect2");
var oldRotate = rect2.transform().localMatrix.split().rotate;

this.spin = function() {
 rect1.animate({transform:'r90,161.8,152.4'},1000, function(){
  rect1.animate({transform:'r0,161.8,152.4'},1000);
 });


 rect2.animate({transform:'r-90,435.2,168.9'},1000, function(){
  rect2.animate({transform:'r'+oldRotate+',435.2,168.9'},1000);
 });
}

如果你看一下codepen你可以看到蓝色矩形的行为与另一个不同，它会下降一点，并且似乎在动画时插入两个不同的状态。我猜测这与矩阵有关，但我真的不知道如何处理它。

Answer 1

问题是虽然split（）确实会告诉你一个轮换，但它实际上并没有告诉你你可能认为它的旋转。

执行这些动画的最佳方法是自己控制值，而不是分割矩阵，这会在动画方面造成巨大的麻烦。

如果其中一个元素具有您已经不知道的变换，那么最好的选择可能是将它放在一个组中并转换该组。