Mobile Animation Tuning

0580c8d5697963abaa4583e26ac16ac0?s=47 Hayato Koriyama
September 20, 2018

Mobile Animation Tuning

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

0580c8d5697963abaa4583e26ac16ac0?s=128

Hayato Koriyama

September 20, 2018
Tweet

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