3

我正在无限地为 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，缩放，然后猛拉回到之前的动画。

有没有一种方法可以让形状在无限旋转的同时缩放一次？我在这里缺少什么吗？

非常感谢。

4

1 回答 1

1

Not sure if that's the best way, but one option is to set the callback: 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();

There's some artifact in the beginning, though, -- it seems to only start scaling after the first rotation cycle is over.

于 2012-09-20T22:48:47.900 回答