我想用Raphael JS创建的一个点来设置圆形动画。
以下是我尝试的代码段:
for(var i=1; i<4; i++) {
var circle = paper.circle(width*0.4, height*0.2, 10*i);
circle.attr(
{
stroke: '#0000d7',
'stroke-width': 1,
'stroke-linejoin': 'round'
}
);
circle.animate({transform: "T0,100"}, 2000);
}
我动画整个圆圈走路。但我希望首先是最里面的圆,然后是第二个圆,然后第三个圆在几毫秒后出现(作为效果)。但我不知道该怎么做。
答案 0 :(得分:0)
假设这可以扩展到任意数量的圆圈,我会使用setTimeout和一个循环,类似于你正在使用的循环。
要使动画从循环中运行,您必须使用&#39;闭合&#39;,这样当动画稍后运行时,它将知道它所引用的是哪个圆圈(否则它可能只是动画最后一个对象。)
使用(function(){})()的函数形式(称为立即模式),将确保在函数范围内捕获变量,以便稍后变量正确。
for(var i=1; i<10; i++) {
(function() { // start closure with functional scope
var circle = paper.circle(width*0.4, height*0.2, 10*i);
setTimeout( function() { circle.animate({transform: "T0,100"}, 2000); }, (i-1) * 2000 )
})();
}
如果你不想要所有的圈子,你仍然需要一个闭包来捕捉索引i(我们将分配给c以使其在函数中清楚)。例如
for(var i=1; i<10; i++) {
(function() { // start functional scope
var c = i; // c is now tied to this scope
setTimeout( function() {
var circle = paper.circle(width*0.4, height*0.2, 10*c);
circle.animate({transform: "T0,100"}, 2000);
}, (c-1) * 2000 )
})();
}
我不确定是否需要在此处创建动画对象,但如果您愿意,则文档为here
相同的例子,但是使用了Raphael.animation。
var animation = Raphael.animation( {transform: "T0,100"}, 2000 )
for(var i=1; i<10; i++) {
(function() {
var c = i;
setTimeout( function() {
var circle = paper.circle(width*0.4, height*0.2, 10*c);
circle.animate( animation );
}, (c-1) * 2000 )
})();
}