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