javascript - 在 Raphael 中组合动画

Question

我正在为 SVG“齿轮/齿轮”形状设置无限动画，使其无限旋转，如下所示:

gearAnim = Raphael.animation({ transform: rotation }, duration, 'linear');
which.animate(gearAnim.repeat("Infinity")); // rotate infinitely.

如果我想让齿轮产生脉冲(比例转换)，我会执行以下操作:

value.animate({
   2: { transform: "s1.2" },
   3: { transform: "s1"} 
}, 600, 'easeOut');

这行得通。然而，问题在于齿轮旋转不会发生比例变换。它停止动画，重置为旋转 0，缩放，然后猛然回到之前的动画。

有没有办法让形状缩放一次同时无限旋转？我在这里遗漏了什么吗？

非常感谢。

Answer 1

不确定这是否是最好的方法，但一种选择是设置回调:http://jsfiddle.net/b9akz/106/

var paper = new Raphael('holder');
var box = paper.rect(100, 100, 30, 30).attr({ stroke: "darkgreen" });
var scale = 2;
var angle = 0;
var func = function(){
    scale = scale > 1.5 ? 1 : 2; 
    angle = angle + 120;
    box.animate(Raphael.animation({ transform: "s" + scale + " r" + angle }, 1000, 'linear', func), 1);
};
func();

虽然开始时有一些瑕疵 -- 它似乎只在第一个旋转周期结束后才开始缩放。