循环动画

Question

这是拉斐尔JS的JavaScript库一个简单的动画。 该函数绘制一个字段，然后熄灭粉红色矩形的对象。 当你点击“灰色”按钮时，粉红色的矩形开始水平移动。粉红色的矩形移动，一旦达到它的指定位置，它就会停止。

我需要帮助的是：

1：使粉红色长方形回归到它的起始位置。

2：循环动画这样的粉红色矩形往返。

我试图通过增加来解决这个“X：0”，之后的“X：-1”，但没有成功。正如你所看到的，我也将重复设置为无穷大，也没有成功。

领域：

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

您需要有效地使用动画的方法的回调函数，并调用它本身，因为你有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点击第三个灰色的方块