下圖顯示了我如何在HTML5/JS中進行無限滾動背景。我的連續背景由X畫布組成。我會在到達之前立即渲染下一個Canvas,並且我將釋放之前的Canvas。這裏的問題是,渲染後動畫很平滑,但到達下一幀時會發生快速的呃逆。因爲它會渲染下一幀,邏輯上會有一個快速的呃逆。 該問題可以使用其他語言的多線程來解決。但是這個渲染需要DOM,所以它會被鎖定。無限Canvas背景滾動無打嗝
問題:如何呈現下一個背景Canvas在HTML5中不阻止當前的jQuery動畫?
INIT > START render 0
_________
| |
| 0 | > render1
|_________|
| |
| 1 | > render 2
|_________|
| |
| 2 | > render 3
|_________|
| |
| ∞ | > render X
|_________|
僞
var currentSpite = 0;
function goAnimate() {
render(currentSpite + 1); //50ms hiccup here
$("#allSpites").animate({ "top": (currentSpite * 1000) + "px" }, 1000, function() {
goAnimate();
});
currentSpite += 1;
release(currentSpite - 2);
if (currentSpite > max) return;
}
請展示一些代碼,「細節」可能是您的性能殺手。首先是:你是否一次又一次地重複使用2個你交換的畫布?因爲如果你不這樣做,那麼創建一個畫布和垃圾收集的廢棄畫布可能會成爲你的性能殺手。 – GameAlchemist
@GameAlchemist不幸的是沒有。所有的畫布都是新的形狀,沒有任何重複的渲染,以避免渲染和只是移動spites。它有大量的代碼,渲染性能很好(〜30ms)。這個問題僅僅是爲了渲染下一個惡意的過程。我的問題是我相信的一個邏輯問題。不過,我會提供一個僞代碼。 – Kousha
所以第一件事就是在兩個畫布之間交換。您可以在現場做到這一點,而無需對代碼進行任何更改。讓我知道你是否想讓我更多地解釋。 – GameAlchemist