拉斐尔JS的动画圈子

我想用Raphael JS创建的一个点圈起动画圈子。拉斐尔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); 
}

我的动画完整的圆走。但我首先需要的是最内圈，然后是第二圈，然后是第三圈出现几毫秒后（作为效果）。但我不知道该怎么做。

来源

2017-04-20 beub

你想要的动画，在任意时间开始？（在这种情况下，我会使用setTimeout并调用一个函数来为其设置动画效果）或者之前的动画完成后（在这种情况下，我将使用动画中的回调参数）。 – Ian

我希望首先出现最内圈。在第二个圆之后（例如1秒后）。然后是第三个圆圈。 – beub

如果我动画：如何创建一个动画对象（在哪里可以找到文档）？ – beub

假设这可以扩展到任何数量的圆圈，我会使用setTimeout和一个循环，类似于您正在使用的循环。

要使动画从循环中工作，必须使用'闭包'，这样当动画稍后运行时，它将知道它引用的是哪个圆圈（否则它可能只是动画最后一个对象）。

使用函数形式（函数（）{}）（）（称为立即模式），将确保变量在函数作用域内被捕获，以便稍后变量正确。

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

相同的例子，但使用拉斐尔。动画。

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

来源

2017-04-21 12:53:34 Ian

拉斐尔JS的动画圈子

回答

相关问题