Mobile Animation Tuning

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

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