Question

使用Raphael JS我希望有一个持续的时钟。

我有点实施但有问题。

对动画的变换不断要求增加一个整数来旋转。最终我要达到一个最大整数。

如果我使用0,90,180,270。当它再次达到0时，它会反过来。

CodePen - ＆gt; https://screensaver.ninja

使用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()

Answer 1

关键是使用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);

Raphael JS席卷时钟

1 个答案: