Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Mobile Animation Tuning
Hayato Koriyama
September 20, 2018
Design
1
300
Mobile Animation Tuning
自分がMobile Animationをチューニングしていた時に気を付けていたことです
Hayato Koriyama
September 20, 2018
Tweet
Share
More Decks by Hayato Koriyama
See All by Hayato Koriyama
nekobato
3
180
nekobato
2
1k
nekobato
1
310
nekobato
0
360
Other Decks in Design
See All in Design
gavaru
0
240
tiagilles
0
200
allenzhangart
0
660
mariannasmith
0
150
rvillarreal
0
240
yuenwang
0
270
noelledeeartist
0
180
rvillarreal
0
130
rvillarreal
0
260
toshiharutakemoto
3
200
twashington16
0
590
marilutwin
0
130
Featured
See All Featured
addyosmani
1348
190k
mojombo
358
62k
sferik
609
54k
frogandcode
127
20k
lara
172
9.5k
tmm1
61
8.4k
samanthasiow
56
6.3k
deanohume
295
27k
brianwarren
83
4.7k
kneath
219
15k
gr2m
83
11k
myddelton
109
11k
Transcript
MOBILE ANIMATION TUNING 1
nekobato ɹFrontend Engineer ɹMercari, inc. @ 2
meguro.cssに来たので 3 CSS芸やります
MOBILE ANIMATION TUNING 4
Mobile上では開発したことない 5 Chrome & DevToolsを確認しながら開発してます(ました)
なぜDesktop Chromeでチューニング? 6 チューニング対象となるのはローエンドのAndroid Chromeで最適化 = ローエンドAndroidにも優しい ついでに開発者にも優しい iOS ローエンド
Android ハイエンド Android
チューニングで気を付けていたこと 7 - ペイントエリアを最小限に保つ - ペイントエリアが増えるとGPU処理が増える - アイドル状態でレイヤーが最小限になるようにする - レイヤーが増えるとメモリが増える
DevTool Panel 紹介 8 Layers Animations Rendering
Layers 9 よく死ぬ(Crash)
Compositing Layer分け 10 - 3D方向にtransformされた要素 transform: translate3d(0, 0, 0); -
将来的にtransformされる要素 will-change: transform;
Updates 11 transform: translate3d(0, 0, 0); はもう必要ない will-change: transformでおk (モバイル用途では)
って思うじゃん 12 width, heightなどのstyleで動かす & ペイントエリアを意図的に縮小したい 場合は未だにハックとして translate3d(0, 0, 0); を使う
(これより良い方法あったら教えてください) USBOTGPSNͰͳ͍"OJNBUJPO Կࢦఆ͠ͳ͍ͱϖΠϯτΤϦΞ͜͜ ཁૉ
Animations 13 - 作ったAnimationの確認 - 気になるAnimationの解析
Animations 14
Render 15
まとめ 16 - ペイントエリアを最小限に保つ - ペイントエリアが増えるとGPU処理が増える - アイドル状態でレイヤーが最小限になるようにする - レイヤーが増えるとメモリが増える
END 17