使用 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() 确实会告诉您旋转，但它实际上不会告诉您您可能认为的旋转。

制作这些动画的最佳方法是自己控制值，而不是拆分矩阵，这会在动画方面引起极大的麻烦。

如果有一种情况，它的元素已经有一个你并不真正知道的变换，那么最好的办法是将它放在一个组中并变换该组。