自分がMobile Animationをチューニングしていた時に気を付けていたことです
MOBILEANIMATIONTUNING1
View Slide
nekobatoɹFrontend EngineerɹMercari, inc.@2
meguro.cssに来たので3CSS芸やります
MOBILEANIMATIONTUNING4
Mobile上では開発したことない5Chrome & DevToolsを確認しながら開発してます(ました)
なぜDesktop Chromeでチューニング?6チューニング対象となるのはローエンドのAndroidChromeで最適化 = ローエンドAndroidにも優しいついでに開発者にも優しいiOS ローエンドAndroidハイエンドAndroid
チューニングで気を付けていたこと7- ペイントエリアを最小限に保つ- ペイントエリアが増えるとGPU処理が増える- アイドル状態でレイヤーが最小限になるようにする- レイヤーが増えるとメモリが増える
DevTool Panel 紹介8LayersAnimationsRendering
Layers9よく死ぬ(Crash)
Compositing Layer分け10- 3D方向にtransformされた要素 transform: translate3d(0, 0, 0);- 将来的にtransformされる要素 will-change: transform;
Updates11transform: translate3d(0, 0, 0);はもう必要ないwill-change: transformでおk(モバイル用途では)
って思うじゃん12width, heightなどのstyleで動かす &ペイントエリアを意図的に縮小したい場合は未だにハックとしてtranslate3d(0, 0, 0); を使う(これより良い方法あったら教えてください)USBOTGPSNͰͳ͍"OJNBUJPOԿࢦఆ͠ͳ͍ͱϖΠϯτΤϦΞ͜͜ཁૉ
Animations13- 作ったAnimationの確認- 気になるAnimationの解析
Animations14
Render15
まとめ16- ペイントエリアを最小限に保つ- ペイントエリアが増えるとGPU処理が増える- アイドル状態でレイヤーが最小限になるようにする- レイヤーが増えるとメモリが増える
END17