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