2014-02-14 112 views
0

下圖顯示了我如何在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; 

} 
+0

請展示一些代碼,「細節」可能是您的性能殺手。首先是:你是否一次又一次地重複使用2個你交換的畫布?因爲如果你不這樣做,那麼創建一個畫布和垃圾收集的廢棄畫布可能會成爲你的性能殺手。 – GameAlchemist

+0

@GameAlchemist不幸的是沒有。所有的畫布都是新的形狀,沒有任何重複的渲染,以避免渲染和只是移動spites。它有大量的代碼,渲染性能很好(〜30ms)。這個問題僅僅是爲了渲染下一個惡意的過程。我的問題是我相信的一個邏輯問題。不過,我會提供一個僞代碼。 – Kousha

+0

所以第一件事就是在兩個畫布之間交換。您可以在現場做到這一點,而無需對代碼進行任何更改。讓我知道你是否想讓我更多地解釋。 – GameAlchemist

回答

2

正如我在評論中說,創建一個畫布是不是你想要的動畫循環中做一些事情:它需要幾毫秒這樣做,這是足以從60fps切換到30(或50到25),因爲您已經有一些圖紙可以做。
最糟糕的是,如果您創建畫布然後'處理'它們,他們將不得不被垃圾收集,這是您的應用程序的另一個'長'停頓。

我的第一個雖然是使用兩個畫布,並通過CSS交換它們。但我只是做了一個快速測試,平穩度很差:我想很多回流。
平滑性很少有人看到一個小的滾動演示,我前一段時間只使用一個畫布(jsfiddle.net/gamealchemist/5VJhp)。所以最後的建議是隻使用一個單獨的畫布,在每一幀上清除它,然後用KinectJS繪製兩個需要的「渲染」,只需在畫圖之前平移畫布以調整座標。

它似乎工作,因爲在9ms你甚至在60fps的16ms內還有幾個ms:甜! :-)