使用 Raphael JS 制作圆圈动画

Question

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

我制作了完整的圆圈动画。但我希望首先是最里面的圆圈，然后是第二个，然后是第三个圆圈，在几毫秒后出现（作为效果）。但是我不知道该怎么做。

Answer 1

假设这将可扩展到任意数量的圈子，我会使用 setTimeout 和一个循环，类似于您使用的循环。

要让动画循环运行，您必须使用 'closure'，这样当动画稍后运行时，它会知道它指的是哪个圆（否则它可能只是动画最后一个对象）。

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

使用 Raphael JS 制作圆圈动画

Animate circles with Raphael JS

javascript

raphael