$30 off During Our Annual Pro Sale. View Details »

Mobile Animation Tuning

Hayato Koriyama
September 20, 2018

Mobile Animation Tuning

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

Hayato Koriyama

September 20, 2018
Tweet

More Decks by Hayato Koriyama

Other Decks in Design

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でおk
    (モバイル用途では)

    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