Raphaël JS 中的循环动画

Question

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

我需要帮助的是：

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

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 点击第三个灰框

Raphaël JS 中的循环动画

Loop animation in Raphaël JS

javascript

jquery

html

raphael