停止動畫和重置Raphaël.js中元素的位置

我有這個簡單的動畫從一邊移動到另一邊，我試圖創建一個重置按鈕，以便動畫停止並恢復爲默認，但我似乎無法讓我正確。停止動畫和重置Raphaël.js中元素的位置

我正在使用的圖書館是拉斐爾，但我幾乎可以肯定，與一個簡單的JavaScript我可以重置函數內的值。

身體的onload初始化函數

function init() { 
    paper = Raphael("loadSVG"); 

    var bg = paper.rect(0, 0, "240px", "90px", 0); 
    bg.attr({fill: "#f3f3ff"}); 
    rect1 = paper.rect(150, 20, 50, 50); 
    rect1.attr({fill: "#ffaaaa", "stroke-width": 3}); 
}

動畫功能

function moveRect1() {  
    if(xEnd == 150) 
    xEnd = 50; 
    else 
    xEnd = 150; 

    rect1.animate({x: xEnd}, 1000, "Sine", function(){ 
    moveRect1(); 
    }); 
}

和停止按鈕並不需要綁定停止按鈕工作:)

function stopsvgRect1() { 
    rect1.stop(); 
}

來源

2012-07-04 Dymond

到你創建的功能。

例如像這樣：

document.querySelector('#stop').onclick = function() { 
    stopsvgRect1(); 
};

打開this fiddle看到它在行動。

編輯：

由於位置也應該重置了，你可以選擇Raphael.transform()爲這次行動。

打開我的updated fiddle看它是如何工作的。

來源

2012-07-05 08:53:35

工程就像一個魅力，但它的唯一「暫停」動畫我的問題更多，如何重置動畫的值，使其恢復爲默認值。 – Dymond

我已經更新了我的答案，我希望它通過小提琴本身得到清除:) –

AAA偉大！非常感謝你。我會嘗試做廣告，所以當我按兩次播放它重新啓動動畫.. 如果我不能讓它發送你和電子郵件;） – Dymond

停止動畫和重置Raphaël.js中元素的位置

回答

相關問題