循環動畫

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點擊第三個灰色的方塊