Question

我试图制作一个取决于几个参数的无限动画，它应该或多或少看起来像雷达＆＃34;。问题是圈子与时间不同步，我无法弄清楚原因：

var paper = Raphael(0, 0, 800, 800);

var circle = paper.circle(70, 650, 0).attr({
    "stroke-width": 6,
    "fill": "#fff",
    "fill-opacity": 0,
    "stroke": "#D14136"
}).transform("m2, 0, 0, 0.5, 0, 0");

var circles = paper.set();

function animateRadar(n, speed) {
    // Prepare animation
    var animation = Raphael.animation({
        "r": 50,
        "opacity": 0
    }, speed, function() {

    }).repeat(Infinity);

    // Prepare set
    for (var i = 0; i < n; i++  ) {
        circles.push(circle.clone().animate(animation.delay(i * speed/n)));
    }

}

animateRadar(3, 1e3);

jsFiddle here

任何人都可以帮助我，以便每个动画都等于第一个动画，而不会使相位不同步吗？

Answer 1

它失去同步的原因是animation.delay(i * speed/n)。延迟发生在每个.repeat(Infinity)中，而不仅仅是您可能期望的第一个。

可以使用setTimeout代替animation.delay来修复：

// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(0, 0, 800, 800);

var circle = paper.circle(70, 650, 0).attr({
    "stroke-width": 6,
    "fill": "#fff",
    "fill-opacity": 0,
    "stroke": "#D14136"
}).transform("m2, 0, 0, 0.5, 0, 0");

var circles = paper.set();

function animateRadar(n, speed) {
    // Prepare animation
    var animation = Raphael.animation({
        "r": 50,
        "opacity": 0
    }, speed, function() {

    }).repeat(Infinity);

    // Prepare set
    for (var i = 0; i < n; i++  ) {
        setTimeout(function(){
            circles.push(circle.clone().animate(animation));
        }, i * speed/n);
    }
}

animateRadar(3, 1e3);

<强> jsFiddle here

Raphael.js为什么这些圈子会随着时间的推移而变得不同步？

1 个答案: