網頁上多個html5畫布元素的計時實踐

Question

我發現了一些關於使用請求動畫幀爲HTML5 canvas元素設置動畫的文章。 http://paulirish.com/2011/requestanimationframe-for-smart-animating/

如果我有多個元素，我是否應該爲每個元素分別設置一個計時系統（一個單獨的腳本），還是應該在一個循環中包含它們？

這是一本雜誌的概念，其中可能有每個「頁」用不同的動畫（一個一系列的線，另一種波，也許是另一種，當你閱讀這些文字在你的眼前解體的圖像）

任何幫助總是讚賞。

Answer 1

我假設你會分別開發每個動畫，而且這些動畫不會相互關聯。在這種情況下，你根本不需要同步...如果你去同步起來在一個循環中，你將有以下的問題...

• 如果動畫一個畫布是緩慢的，在其他畫布動畫將不得不等待...
• requestAnimationFrame幫助您創建智能循環，即如果您的畫布處於隱藏狀態或您的選項卡未處於活動狀態，則畫布不會發生回調。在同步的情況下，您將無法完全優化。
  • 在一個循環中管理所有動畫會比單獨循環更復雜。
• 調試時，你可能會遇到所引起的頁面其他動畫的問題...

所以，如果你的動畫是沒有關係的，我強烈建議不使用一個循環同步的動畫。希望這回答你的問題。

下面的鏈接將幫助您瞭解更多關於HTML5畫布...

• http://www.technobits.net/articles/13730/improving-html5-canvas-performance/
• http://www.technobits.net/search/page-1/?q=%22html5%20canvas%22

Answer 2

這完全取決於你。你是否希望元素與其他元素同步運行？或者沒有關係？

如果它不重要，或者如果您需要它們同步，請使用一個計時器將它們全部保存在一個循環中。它在每個瀏覽器上可能會更快，並且更容易調試，維護和理解代碼。

如果他們不應該同步，那麼當然你必須有兩個計時器！另外，如果你覺得將來你可能想要不同的零件以不同的速度運行，那麼你可能需要考慮兩個定時器。