在Raphael中移動基於路徑的形狀不是流暢的

我已經在黑色背景上定義了一個簡單的正方形形狀，並嘗試使用重複調用.transform()來爲其設置動畫效果。使用下面的代碼，它會以恆定速度從左向右移動。我注意到兩兩件事：在Raphael中移動基於路徑的形狀不是流暢的

垂直線「忽悠」而動，有時候它看起來像頂部和線的底部是在不同的位置（像在老的一天，當你試圖繪製當屏幕本身更新時，在CRT監視器上的垂直線）
動畫在繼續之前經常停頓一會兒（動作中的小動作）。

所以我覺得我沒有做正確的事情。我應該使用不同的功能移動基於路徑的對象嗎？或者我應該改變它更新的方式？

$(document).ready(function() { 
    var R = Raphael("display", 640, 480); 

    R.rect(0, 0, 640, 480, 10).attr({ 
     fill : "#000", 
     stroke : "#666" 
    }); 

    var path = "M10,20L10,100L100,100L100,20L10,20"; 

    rectangle= R.path(path).attr({ 
     "stroke" : "#0f0", 
     "stroke-width" : 2 
    }); 

    update(); 
}); 

function update() { 
    D=D+1; 
    var translation_string = "T"+D+",0"; 
    rectangle.transform(translation_string); 
    setTimeout(update, 20); 
}

來源

2012-04-02 Cees Meijer

最好不要用自己的事件定時器手動管理動畫。例如，而不是調用update（），這樣做：

rectangle.animate({ "transform": "T410,0" }, 800, "<>", function() { 
    rectangle.animate({ "transform": "T0,0" }, 800, "<>"); 
});

你應該可以看到一個相當流暢的動畫，是以矩形向右，然後再返回。

在這個小提琴中嘗試一下：http://jsfiddle.net/YadqP/

來源

2012-04-02 13:59:42 pp19dd

這表明應該多小心地問他的問題。答案是正確的，動畫很流暢。但是這種嘗試的目的是創建一個可以使用箭頭鍵移動的對象。所以我不能使用動畫，因爲我不知道整個動作會持續多久。 – 2012-04-02 19:08:57

但是，您仍然可以使用此邏輯。拉斐爾有一個整潔的.stop（）方法，可以中途中斷動畫，並順利地將其移動到下一個。換句話說，rectangle.stop（）。animate（{new coordinates here}）;仍然適合你。 – pp19dd 2012-04-02 19:16:42

令人敬畏的提示。謝謝。 – 2012-04-02 19:22:41

在Raphael中移動基於路徑的形狀不是流暢的

回答

相關問題