Mobile Animation Tuning

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でおｋ （モバイル用途では）

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