Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

  4. MOBILE ANIMATION TUNING 4

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

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

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

  8. DevTool Panel 紹介 8 Layers Animations Rendering

  9. Layers 9 よく死ぬ(Crash)

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

    将来的にtransformされる要素 will-change: transform;
  11. Updates 11 transform: translate3d(0, 0, 0); はもう必要ない will-change: transformでおk (モバイル用途では)

  12. って思うじゃん 12 width, heightなどのstyleで動かす   & ペイントエリアを意図的に縮小したい 場合は未だにハックとして translate3d(0, 0, 0); を使う

    (これより良い方法あったら教えてください) USBOTGPSNͰ͸ͳ͍"OJNBUJPO Կ΋ࢦఆ͠ͳ͍ͱϖΠϯτΤϦΞ͸͜͜ ਌ཁૉ
  13. Animations 13 - 作ったAnimationの確認 - 気になるAnimationの解析

  14. Animations 14

  15. Render 15

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

  17. END 17