アニメーションを最深まで理解してパフォーマンスを向上させる

アニメーションを最深まで理解してパフォーマンスを向上させる   みね 

株式会社サイバーエージェント   SGEマンガ事業部モバイルエンジニア  みね  @mine2424 @nihon_kaizou 2024年度新卒入社  大学1年から Flutter
によるアプリ開発を開始     # F1 # 麻雀 # 海外旅行 (9割カジノ) # 来年ポーカーの世界大会出場します   Nishimine Ryota 

テーマ選定理由と直近の動向   Flutter アニメーション入門   Deep Dive Animation パフォーマンスの計測と分析 01 
02  03  04  CONTENTS Improve Animation Performance 05 

01  テーマ選定理由と直近の動向  

テーマ選定理由と直近の動向   01  なぜこのテーマを選定したか   ・アニメーションの中身はブラックボックスとして扱いがち     ・アニメーションに関するパフォーマンス改善知見が多くない  
  ・ネイティブじゃないとリッチなアニメーションは実装できない　(と思われがち) 

テーマ選定理由と直近の動向   01  アニメーション周りの動向   ・Impeller の stable 化・Lottie
や Rive 等の複雑なパスの計算の向上 (by Impeller)    ・Blur のパフォーマンス向上 (by Impeller)  　Blur の再実装により CPU, GPU の使用率が半分程度まで抑えられた  

テーマ選定理由と直近の動向   01  Shader Compilation Jank  ・Shader Compilation Jank とは？
　アニメーションが初回起動時に発生するパフォーマンス低下を起こす問題     ・Skia 時代　コンパイル時に必要な Shader が widget の描画と同時に生成されるため   パフォーマンスの低下を引き起こしていた     ・Impeller 時代　アニメーションビルド時に必要な Shader を生成するため、  コンパイル中に発生する Shader Jank を防ぐことができる  

テーマ選定理由と直近の動向   01  Stencil-then-Cover Approach  ・課題  　すべての描画パスを CPU で分割し、その後 GPU
に送信して描画します。  しかしこれでは CPU に大きな負荷をかけパフォーマンスが低下する可能性があった。     ・解決策  　描画したい形をあらかじめ Stencil Buﬀer に書き込み必要な部分だけ描画することで、   無駄な描画を最低限にすることができる。    

Flutter 3.24 以上にしたら   パフォーマンス超絶向上  

02  Flutter アニメーション入門  

Flutter アニメーション入門   アニメーション Widget の種類  02  ・Implicit / Explicit
Animation 　主に AnimationController を利用して Widget の挙動を操作する・Low Level Animation  　CustomPainter を利用して Canvas に描画されるものに対してパラメータを操作することで   Widget の挙動を操作する    ・Third Party Animation Framework  　Lottie や Rive といったフレームワークによるアニメーション表現を行う  

Flutter アニメーション入門   アニメーション Widget の種類  02  ・Implicit Animation 　Widget
の property の値が変更された際にアニメーションを行う   AnimationController を使用せずに Widget が使える (AnimatedFoo 系)  ・Explicit Animation  　AnimationController や Tween を用いて詳細にアニメーションの設定を行うことができる   (FooTransition 系) 

Flutter アニメーション入門   Implicit Animation  02  AnimationController を使わずに  値を変化させるだけでアニメーションを実現  ex)
AnimatedContainer 

Flutter アニメーション入門   Explicit Animation  02  ex) FadeTransition  ・AnimationController 使用のため
Statefulwidget の場合は   SingleTickerProviderStateMixin を継承する 

Flutter アニメーション入門   Explicit Animation  02  Animation を制御  Animation の値を管理
 

Flutter アニメーション入門   Explicit Animation  02  AnimationController  の設定を記述  

Flutter アニメーション入門   Explicit Animation  02  Tween は animation の 
開始と終了の値を定義する    animate() で controller と  紐付けられる  アニメーションを開始 

Flutter アニメーション入門   02  ・SingleTickerProviderStateMixin ・AnimationController ・vsync ブラックボックス

03  Deep Dive Animation 

Animation はどのような仕組みでできてる？   👀  Deep Dive Animation  03 

Deep Dive Animation  03  動いていますか？  

画像を高速で描画しているだけ   Deep Dive Animation  03 

1 sec に 60 ~ 120 frame が  描画されている  
Deep Dive Animation  03 

Flutter の Animation は  どのように実現しているのか？   Deep Dive Animation  03 

Flutter における Animation の仕組み  Deep Dive Animation  03  ・Animation class
　アニメーションにおける現在の値 (value) と AnimationStatus のみを保持する  　Listenable を継承しているので AnimationController 等で value や AnimationStatus の変化を  検知することができる。 

Flutter における Animation の仕組み  Deep Dive Animation  03  ・AnimationController 　Animation
を継承したクラスで自身が持つメソッドで管理している値を制御できる   　forward(), reverse(), stop() etc … 

Flutter における Animation の仕組み  Deep Dive Animation  03  ・Ticker  　1
frame ごとに callback を呼ぶ    ・vsync  　frame を画面のリフレッシュ・レートに   同期させることで視覚的な歪みを防いでいる。      

Ticker ? vsync ?  Deep Dive Animation  03 

What is Ticker ?  ・SchedulerBinding について  　アプリの動作をデバイスのディスプレイの frame と同期させる  ex)
30 FPS = 30 frame / sec  Deep Dive Animation  03  30 FPS 60 FPS 120 FPS Old Phone iPhone 8 iPhone 16 Pro

What is Ticker ?  Deep Dive Animation  03  Event SchedulerBinding 
を介して通信  Flutter Engine

を介して通信  Flutter Engine Ticker SchedulerBinding  SchedulerBinding を介して  毎 frame ごとにイベントが送られるが   Ticker で Animation を行うかを制御する 

を介して通信  Flutter Engine Ticker SchedulerBinding  SchedulerBinding を介して  毎 frame ごとにイベントが送られるが   Ticker で Animation を行うかを制御する  Paint

Ticker は frame を制御している   Deep Dive Animation  03 

Flutter における Animation の仕組み  Deep Dive Animation  03  ・Ticker  　1
frame ごとに callback を呼ぶ    ・vsync  　frame を画面のリフレッシュ・レートに   同期させることで視覚的な歪みを防いでいる。      

AnimationController .forward()  Deep Dive Animation  03 

AnimationController .forward()  Deep Dive Animation  03  ・_animateToInternal ではアニメーションを行う際の様々な値の制御を行っている  

AnimationController .forward()  Deep Dive Animation  03  最大、最小値を元に  value の値を調整 

AnimationController .forward()  Deep Dive Animation  03  Ticker 処理を開始する 

SingleTickerProviderStateMixin  Deep Dive Animation  03  ・対象の Widget tree が有効な場合に単一の Ticker
を更新する mixin ・継承先の class で単一の AnimationController を使用する際に使用（ vsync: this で使用） 

SingleTickerProviderStateMixin  Deep Dive Animation  03  ticker を現在の Widget tree 内で
有効にするかのフラグを管理   ticker 自身を管理 

SingleTickerProviderStateMixin  Deep Dive Animation  03  ticker 自身の  有効フラグを更新する  Listenable を更新する 

AnimatedSlide を使用して   リッチなUIを実装  Deep Dive Animation  03 

実装内容  ・StatefulWidget を継承・SingleChildScrollView + Column Deep Dive Animation  03 

実装内容  ・FlutterLogo を AnimatedSlide で  アニメーションさせる・1000 個の要素を表示  Deep Dive
Animation  03 

Deep Dive Animation  03 

カクツキが多い   パフォーマンス悪いかも？   Deep Dive Animation  03 

04  パフォーマンスの計測と分析  

パフォーマンスの計測と分析   パフォーマンスの計測方法   04  ・DevTools の活用  ・Flutter Inspector  　UI
のレイアウトや widget のプロパティを確認できる   ・Performance View  　アプリのパフォーマンスをリアルタイムで監視し、 CPUやメモリの使用状況を分析   ・Memory View  　メモリ使用量の時系列グラフ表示や、メモリインスタンスの分析を行う

パフォーマンスの計測と分析   DevTools の見方  04  ・Frame Chart 　1 frame =
1つのバーとして扱い、フレームのレンダリング中に発生する   それぞれの役割の作業によってバーの色が異なる  

パフォーマンスの計測と分析   DevTools の見方  04  ・UI Thread 　描画コマンドを含む軽量なオブジェクトのレイヤーツリーを生成し、   デバイス上でレンダリングされるように
raster thread に送られる  （簡単に言えば、CPU の処理に関する Thread） 

パフォーマンスの計測と分析   DevTools の見方  04  ・Raster Thread 　Skia や Impeller
といった Flutter Engine からグラフィックコードを実行するもの。   なので UI Thread でのアプリケーションロジックの実行とは別で扱う。   （簡単に言えば、GPU の処理に関する Thread） 

パフォーマンスの計測と分析   DevTools の見方  04  ・Jank 　frame のレンダリングが 16 ms
以上かかる場合に Jank としてみなされこの色になります   : frame 内で Jank が  発生した箇所  (60 FPS のデバイスの場合 )

パフォーマンスの計測と分析   DevTools の見方  04  ・Shader Compilation 　最初にアプリ内の描画と同時に shader を生成している場合 
: Shader Compilation が  発生している箇所

パフォーマンスの計測と分析   計測時の注意点   04  ・パフォーマンス計測時は Proﬁle Mode で実行すること  
・実行の違い   Debug : JIT (just in time) その場で compile される Profile : AOT (ahead of time) アプリが読み込まれる前にpre-compile されて実行

パフォーマンスの計測と分析   計測対象  04  ・AnimatedSlide で実装・1000個のアニメーションする要素を用意  

パフォーマンスの計測と分析   計測結果  04 

パフォーマンスの計測と分析   計測結果  04  : AnimationSlide の描画箇所

パフォーマンスの計測と分析   計測結果  04  : AnimationSlide の描画箇所重複した処理が続いてしまっている  

パフォーマンスの計測と分析   計測結果  04  ・Paint Time  196.763 ~ 196.780 s
=> 0.17s (170 ms) 　  1frame ~ 16 ms 以下に抑えられていない  

パフォーマンスの計測と分析   計測結果  04  ・Rebuild Count  performance view の rebuild
stats で確認  要素の数と同じ回数 rebuild されている  

05  Improve   Animation Performance 

Improve Animation Performance  改善策を考える   05  ・一括でアニメーションをまとめられないか　・Repaint の範囲を抑える
 

パフォーマンスの計測と分析   一括でアニメーション操作   04 

パフォーマンスの計測と分析   Repaint の範囲を抑える   04  ・RepaintBoundary 　子ウィジェットの描画を他の部分から分離し、特定の部分だけを Repaint させる 
  　同じ Layer を共有する RenderObject は markNeedPaint にて   repaint が必要だと判断されるたびに repaint が発生する    　同じ Layer を共有する RenderObject : 祖先にある要素, 子の要素どちらも含む 

パフォーマンスの計測と分析   Repaint の範囲を抑える   04  はみ出ている... ref: https://api.flutter.dev/flutter/widgets/RepaintBoundary-class.html

パフォーマンスの計測と分析   Repaint の範囲を抑える   04  はみ出ている... 無駄なペンキ塗りが発生... ref: https://api.flutter.dev/flutter/widgets/RepaintBoundary-class.html

パフォーマンスの計測と分析   Repaint の範囲を抑える   04  はみ出ている... 無駄なペンキ塗りが発生... 事前にテープを貼ろう! ref:
https://api.flutter.dev/flutter/widgets/RepaintBoundary-class.html

パフォーマンスの計測と分析   RepaintBoundary  04  親子 Transform.rotate ListView repaint が発生 
RepaintBoundary なしの場合 

パフォーマンスの計測と分析   RepaintBoundary  04  親 Transform.rotate ListView repaint が発生  RepaintBoundary
なしの場合  子祖先へ repaintが波及 

パフォーマンスの計測と分析   RepaintBoundary  04  親 Transform.rotate ListView repaint が発生  祖先へ
repaintが波及  RepaintBoundary なしの場合  子 repaint 範囲が広がる 

RepaintBoundary ありの場合  RepaintBoundary を付与 

RepaintBoundary ありの場合  repaint が祖先まで   波及しないようになる  

パフォーマンスの計測と分析   Repaint の範囲を抑える   04 

パフォーマンスの計測と分析   検証結果  04  効果はバツグンだ！   DevTools の Flutter Inspector 

パフォーマンスの計測と分析   検証結果  04  ・計測結果   0.673 ~ 0.765 s
=> 0.08s (80 ms) before 170 ms  ・Rebuild 回数   

パフォーマンスの計測と分析   RepaintBoundary の付与基準   04  Q: metrics の数値が高ければどこにでも付与すれば良いのか？  RepaintBoundary
has the further side-eﬀect of possibly hinting to the engine that it should further optimize animation performance.  Flutter Engine (GPU) に副作用をもたらす可能性   （GPU 内のメモリコストを逼迫させるため）  

パフォーマンスの計測と分析   RepaintBoundary の付与基準   04  ・Component 化  ・Builder 系 
　AnimatedBuilder, HookBuilder    解決できない場合のみ付与     ・Rive 等の animation framework  ・コンポーネント内に  複数のアニメーションが存在している   A : 段階的に付与するか判断する 

Animation のパフォーマンスで悩んでいる ...  どうしてもパフォーマンスが良くならない ....  → Ask The Speaker へ 
自分も知らない事例がたくさんあるのでぜひ一緒に考えましょう！  

ご清聴ありがとうございました   Thank you! 

アニメーションを最深まで理解してパフォーマンスを向上させる

アニメーションを最深まで理解してパフォーマンスを向上させる

More Decks by mine2424

Other Decks in Programming

Featured

Transcript