svg - 拉斐尔变换动画不正常

Question

我在 Raphael(和 Snap.svg，做同样的事情)中做一个动画转换。

如果我对基本元素应用旋转，它会像我预期的那样正常旋转。但是，如果我已经应用了先前的变换(即使它是 t0,0 或 r0)，该元素似乎会缩小和放大，就好像它总是必须适合其先前的边界框或其他东西一样。

这是一个 example fiddle

var r1 = s.rect(0,0,100,100,20,20).attr({ fill: "red", opacity: "0.8", stroke: "black", strokeWidth: "2" }); 
r1.transform('t0,0'); // any transform leads to shrink on rotate...
r1.animate({ transform: 'r90,50,50' }, 2000);


var r2 = s.rect(150,0,100,100,20,20).attr({ fill: "blue", opacity: "0.8", stroke: "black", strokeWidth: "2" });
r2.animate({ transform: 'r90,200,50' }, 2000);

关于正在发生的事情，我在动画转换中是否明显遗漏了什么？

Answer 1

要弄清楚这里发生了什么，您需要了解几件不同的事情。

首先是您的动画变换是替换您的原始变换，而不是添加到它上面。如果在动画中包含原始变换指令，则可以避免收缩效果:

var r1 = s.rect(0,0,100,100,20,20)
        .attr({ fill: "red", opacity: "0.8", stroke: "black", strokeWidth: "2" }); 
r1.transform('t0,0'); 
    // any transform leads to shrink on rotate...
r1.animate({ transform: 't0,0r90,50,50' }, 5000); 
    //unless you repeat that transform in the animation instructions

http://jsfiddle.net/96D8t/3/

如果您的原始变换是围绕同一中心旋转，您也可以避免收缩效果:

var r1 = s.rect(0,0,100,100,20,20)
        .attr({ fill: "red", opacity: "0.8", stroke: "black", strokeWidth: "2" }); 
r1.transform('r0,50,50'); // no shrinking this time...
r1.animate({ transform: 'r90,50,50' }, 2000);

http://jsfiddle.net/96D8t/4/

但为什么它会有所不同，因为 0,0 的平移或 0 的旋转实际上并没有改变图形？当您要求程序在两种不同类型的转换之间进行转换时，这是程序计算中间值的方式的副作用。

Snap/Raphael 正在将您的两个不同变换转换为矩阵变换，然后在矩阵中的每个值之间进行插值(计算中间值)。

二维图形变换可以用如下形式的矩阵表示

a   c   e
b   d   f

(这是标准的字体)

你可以把矩阵的两行看成是两个代数公式，用于确定最终的x和y值，其中行中的第一个数字乘以原始x值，第二个数字乘以原始y值，第三个数字乘以常数 1:

newX = a*oldX + c*oldY + e;
newY = b*oldX + d*oldY + f;

像 t0,0 这样的不做任何转换的矩阵是

1   0   0
0   1   0

它实际上在内部表示为具有命名值的对象，例如

{a:1,  c:0,  e:0,
 b:0,  d:1,  f:0}

不管怎样，它只是说 newX 是 oldX 的 1 倍，newY 是 oldY 的 1 倍。

r90,50,50 命令的矩阵是:

0   -1   100
1    0   0

即，如果您的旧点是 (50,100)，则公式为

newX = 0*50 -1*100 + 100*1 = 0
newY = 1*50 + 0*100 + 0    = 50

点 (50,100) 围绕点 (50,50) 旋转 90 度变成 (0,50)，正如预期的那样。

开始变得意想不到的地方是当你试图转变的时候

1   0   0
0   1   0

到

0   -1   100
1    0   0

如果将矩阵中的每个数字从起始值转换为结束值，则中间点将是

0.5   -0.5   50
0.5    0.5   0

它作为矩阵将矩形缩小一半并围绕 (50,50) 旋转 45 度。

所有这些可能比您需要知道的更多数学知识，但我希望它有助于理解正在发生的事情。

无论如何，简单的解决方案是确保您始终匹配动画前后的转换类型，以便程序可以插入原始值，而不是矩阵值。