Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Mobile Animation Tuning

Hayato Koriyama
September 20, 2018
Design
1
450

Mobile Animation Tuning

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

Hayato Koriyama

September 20, 2018
Tweet

More Decks by Hayato Koriyama

See All by Hayato Koriyama
Migration to BrowserWindow in Electron
nekobato
3
430
Building frontend development environment and web performance monitoring
nekobato
2
1.2k
P2P Netfwork with Node.js
nekobato
1
490
Electron年報
nekobato
0
520

Other Decks in Design

See All in Design
アバター×仮想空間の進化におけるクリエイティブと技術
cyberagentdevelopers
PRO
1
980
今から始めるFigma超入門
448jp
0
840
ペルナ
rkinoshi
1
160
Demon Deals Cast
breadman
1
1.9k
Meep_Nubie_store_sequence
vincentwu
PRO
0
110
未来探索型リサーチ「みらいのしごと」
koel
1
110
心地よいテンポを届ける！『プロジェクトセカイ』のゲームUI/UX
cyberagentdevelopers
PRO
1
1.4k
YOUは何しにそのデザインチームへ？【デザインマネージャー編】RAKSUL編
izumi_junichi
2
800
先端科学と社会をアートでつなぐビジュアライゼーション
masakick
0
1.1k
UXA2022 Day 1; Paul Merrel and Lauren Argenta - From matter to meta
uxaustralia
PRO
0
220
認知科学のススメ
takanorip
4
3.2k
UXA2022 Day 2; Kerry Matheson & Catherine Gleeson - Slowing down to speed up: The accidental innovation
uxaustralia
PRO
1
240

Featured

See All Featured
What’s in a name? Adding method to the madness
productmarketing
11
1.7k
VelocityConf: Rendering Performance Case Studies
addyosmani
316
22k
The Brand Is Dead. Long Live the Brand.
mthomps
47
2.8k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
499
130k
The Mythical Team-Month
searls
210
40k
The Pragmatic Product Professional
lauravandoore
19
3.2k
Typedesign – Prime Four
hannesfritz
34
1.4k
Why You Should Never Use an ORM
jnunemaker
PRO
48
7.7k
jQuery: Nuts, Bolts and Bling
dougneiner
56
6.5k
Building Better People: How to give real-time feedback that sticks.
wjessup
344
17k
From Idea to $5000 a Month in 5 Months
shpigford
374
44k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
12
970

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