Raphael JS 扫地钟

Raphael JS sweeping clock

使用Raphael JS我想要一个持续扫描的时钟。

我已经实现了,但是有问题。

动画的变换不断需要一个递增的整数来旋转。最终我会达到最大整数。

如果我用0,90,180,270。当它再次达到 0 时,它会以另一种方式返回。

代码笔 -> http://codepen.io/ianw92/pen/yNLdZz

Javascript:

var svg = Raphael("container",400,400),
    triangle = svg.path("M210 200L190 200L200 100Z").attr({fill:"#000"}),
    circle = svg.circle(200,200,5).attr({fill:"#f00"});

// Rotation settings
var handAngle = 45,
    centerX = 200,
    centerY = 200;

y = 0

function a() {
    y = (y + 90) % 360;
    triangle.animate({transform: "r"+y + "," + centerX + "," + centerY}, 500, b);
}
function b() {
    y = (y + 90) % 360;
    triangle.animate({transform: "r"+y + "," + centerX + "," + centerY}, 500, a);
}

a()

关键是使用 Raphael.animation(...).repeat(Infinity)

http://codepen.io/ianw92/pen/xGbKJq

var anim=Raphael.animation({transform: "r360" + "," + centerX + "," + centerY}, 60000, 'linear').repeat(Infinity);

triangle.animate(anim);