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();

虽然开头有一些神器，但它似乎只是在第一个旋转周期结束后才开始缩放。

结合拉斐尔的动画

1 个答案: