Question

这是RaphaëlJS的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个动画。所以关键位是下面的第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点击第3个灰色框

RaphaëlJS中的循环动画

1 个答案: