我无限地为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,缩放,然后猛然回到上一个动画。
是否有一种方法可以让形状缩放一次,同时无限旋转?这里有什么我想念的吗?
非常感谢。
答案 0 :(得分: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();
虽然开头有一些神器,但它似乎只是在第一个旋转周期结束后才开始缩放。