使用Raphael JS制作动画圈

时间:2017-04-20 14:25:46

标签: javascript raphael

我想用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);
}

我动画整个圆圈走路。但我希望首先是最里面的圆,然后是第二个圆,然后第三个圆在几毫秒后出现(作为效果)。但我不知道该怎么做。

1 个答案:

答案 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  )
    })();
}

jsfiddle

如果你不想要所有的圈子,你仍然需要一个闭包来捕捉索引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  )
    })();
}

jsfiddle

我不确定是否需要在此处创建动画对象,但如果您愿意,则文档为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  )
    })();
}

jsfiddle