javascript - Raphaël JS 中的循环动画

Question

这是 Raphaël JS 的 JavaScript 库中的一个简单动画。 该函数绘制一个字段，然后输出一个粉红色矩形的对象。 当您点击“灰色”按钮时，粉红色矩形开始水平移动。粉色矩形移动，一旦到达预定位置便停止。

我需要帮助的是:

1:使粉色矩形回到起始位置。

2:循环播放动画，使粉色矩形来回移动。

我试图通过在“x:-1”之后添加“x: 0”来解决这个问题，但没有成功。如您所见，我还将重复设置为无穷大，但也没有成功。

领域:

var p = Raphael(0, 0, 240, 140);
    p.rect(0,0,240,70);

onclick 的触发按钮和函数:

p.rect(130, 80, 50, 25)
    .attr({
        fill : "grey",
        "stroke-width" : 1
    })
    .click(function(){
    pinkRect.animate({
        repeat: "Infinity",
        x:-1,
        }, 2000);

});

Answer 1

你需要使用 animate 方法的回调函数，让它调用自己，因为你实际上有 2 个动画。所以关键位是下面的第二位......

p.rect(130, 80, 50, 25)
    .attr({
        fill : "grey",
        "stroke-width" : 1
    })
    .click( animPink );

function animPink() {
    var x = pinkRect.attr('x') < 0 ? 150 : -1;
    pinkRect.animate({ x: x }, 2000, animPink);
};

jsfiddle点击第三个灰色框