在應用程式中繪製動畫(Animation)是效能量測時最常被提及的主題之一。 多虧了 Flutter 的 Skia 引擎以及其能夠快速建立與銷毀元件(Widgets)的能力, Flutter 應用程式預設就具有良好的效能, 因此您只需避免常見的陷阱,即可達到卓越的效能表現。

一般建議

#

如果您發現動畫(Animation)出現卡頓(不流暢),請務必在以 profile 模式建置的應用程式下進行效能分析。 Flutter 預設的建置會產生 debug 模式的應用程式, 這並不能反映正式發佈時的效能。 如需更多資訊,請參閱 Flutter 的建置模式

幾個常見的陷阱:

  • 每一幀重建的 UI 遠超過預期。要追蹤元件(Widgets)重建情況,請參閱 顯示效能資料
  • 直接建立大量 children 清單,而不是使用 ListView。

如需更多關於效能評估及常見陷阱的資訊, 請參閱以下文件:

僅限行動裝置的建議

#

您是否在行動裝置應用程式上,僅在動畫(Animation)首次執行時發現明顯的卡頓?為避免這種情況,請確保您正在使用 Flutter 預設的圖形渲染器 Impeller

僅限網頁的建議

#

以下系列文章涵蓋了 Flutter Material 團隊在提升 Flutter Gallery 應用程式網頁效能時的經驗: