Mobile Animation Tuning

Transcript

1. 1.

   MOBILE ANIMATION TUNING 1

2. 2.

   nekobato ɹFrontend Engineer ɹMercari, inc. @ 2

3. 3.

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

4. 4.

   MOBILE ANIMATION TUNING 4

5. 5.

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

6. 6.

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

   Android ハイエンド Android
7. 7.

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

8. 8.

   DevTool Panel 紹介 8 Layers Animations Rendering

9. 9.

   Layers 9 よく死ぬ(Crash)

10. 10.

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

    将来的にtransformされる要素 will-change: transform;
11. 11.

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

12. 12.

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

    （これより良い方法あったら教えてください） USBOTGPSNͰ͸ͳ͍"OJNBUJPO Կ΋ࢦఆ͠ͳ͍ͱϖΠϯτΤϦΞ͸͜͜ ਌ཁૉ
13. 13.

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

14. 14.

    Animations 14

15. 15.

    Render 15

16. 16.

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

17. 17.

    END 17