如何使用 requestAnimationFrame 制作動畫？

Question

當我單擊 + 和 - 按鈕像 Google 地圖一樣放大和縮小時，我正在嘗試使用requestAnimationFrame為我的畫布設置動畫（當您單擊 + 按鈕進行放大時，您會看到輕微的過渡或延遲） . 與傳統的畫布實現不同，我在應用程序中有一個非常復雜的結構。

單擊按鈕時，將調用服務內的zoomin()函數，計算值，然后發出結果值，該值由不同的組件A捕獲，該組件又調用不同的類方法redraw()繪畫布.

在我看到的每個示例中，通過隨時間操縱像素值來對圖像進行動畫處理，並且可以使用draw()方法。 但是誰能告訴我應該在哪里處理這個問題，還有其他選擇嗎？ 還有我怎么能像谷歌地圖在 JavaScript 中那樣制作動畫？

有人可以指導我嗎？

謝謝你。

Answer 1

您看到的演示是正確的。 requestAnimationFrame是一種手段而不是目的。 您可以通過限制調用方法的頻率來使用它來使您的應用程序更加流暢和高性能，而不僅僅是為了使用它進行繪制，因為這無濟於事。

如果您想使用requestAnimationFrame進行節流（即每 1/60 秒執行一次重繪更新，而不是每次zoomin時），您將必須更新您的邏輯，並確實在數據的后台存儲和更新縮放值在某處服務。 requestAnimationFrame循環確實應該可以訪問和調用redraw ，因此它每 1/60 秒調用一次，而不是每當更新時調用。 Redraw應該有權訪問繪制地圖所需的所有數據（如當前縮放級別）。

唯一的選擇是不使用requestAnimationFrame並在接收鼠標滾輪事件時自己進行去抖動以防止大量繪制。 聽起來您的應用程序可以從允許使用requestAnimationFrame的更簡單的結構中受益。

對於動畫部分，我會問一個單獨的問題，因為那是另一個話題。