Mobile Animation Tuning

自分がMobile Animationをチューニングしていた時に気を付けていたことです

Transcript

1. MOBILE
   ANIMATION
   TUNING
   1
   

   View Slide

2. nekobato
   ɹFrontend Engineer
   ɹMercari, inc.
   @
   2
   

   View Slide

3. meguro.cssに来たので
   3
   CSS芸やります
   

   View Slide

4. MOBILE
   ANIMATION
   TUNING
   4
   

   View Slide

5. Mobile上では開発したことない
   5
   Chrome & DevToolsを確認しながら開発してます（ました）
   

   View Slide

6. なぜDesktop Chromeでチューニング？
   6
   チューニング対象となるのはローエンドのAndroid
   Chromeで最適化 = ローエンドAndroidにも優しい
   ついでに開発者にも優しい
   iOS ローエンド
   Android
   ハイエンド
   Android
   

   View Slide

7. チューニングで気を付けていたこと
   7
   - ペイントエリアを最小限に保つ
   - ペイントエリアが増えるとGPU処理が増える
   - アイドル状態でレイヤーが最小限になるようにする
   - レイヤーが増えるとメモリが増える
   

   View Slide

8. DevTool Panel 紹介
   8
   Layers
   Animations
   Rendering
   

   View Slide

9. Layers
   9
   よく死ぬ(Crash)
   

   View Slide

10. Compositing Layer分け
    10
    - 3D方向にtransformされた要素 transform: translate3d(0, 0, 0);
    - 将来的にtransformされる要素 will-change: transform;
    

    View Slide

11. Updates
    11
    transform: translate3d(0, 0, 0);
    はもう必要ない
    will-change: transformでおｋ
    （モバイル用途では）
    

    View Slide

12. って思うじゃん
    12
    width, heightなどのstyleで動かす
    　　&
    ペイントエリアを意図的に縮小したい
    場合は未だにハックとして
    translate3d(0, 0, 0);　を使う
    （これより良い方法あったら教えてください）
    USBOTGPSNͰ͸ͳ͍"OJNBUJPO
    Կ΋ࢦఆ͠ͳ͍ͱϖΠϯτΤϦΞ͸͜͜
    ਌ཁૉ
    

    View Slide

13. Animations
    13
    - 作ったAnimationの確認
    - 気になるAnimationの解析
    

    View Slide

14. Animations
    14
    

    View Slide

15. Render
    15
    

    View Slide

16. まとめ
    16
    - ペイントエリアを最小限に保つ
    - ペイントエリアが増えるとGPU処理が増える
    - アイドル状態でレイヤーが最小限になるようにする
    - レイヤーが増えるとメモリが増える
    

    View Slide

17. END
    17
    

    View Slide