Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Mobile Animation Tuning
Search
Hayato Koriyama
September 20, 2018
Design
1
760
Mobile Animation Tuning
自分がMobile Animationをチューニングしていた時に気を付けていたことです
Hayato Koriyama
September 20, 2018
Tweet
Share
More Decks by Hayato Koriyama
See All by Hayato Koriyama
Migration to BrowserWindow in Electron
nekobato
3
900
Building frontend development environment and web performance monitoring
nekobato
2
1.5k
P2P Netfwork with Node.js
nekobato
1
820
Electron年報
nekobato
0
870
Other Decks in Design
See All in Design
チームで事業価値を生み出す、プロアクティブなデザイナーになるための道のり/ Designship2025_Naya
root_recruit
PRO
0
220
decksh object reference
ajstarks
2
1.3k
佐藤千晶|ポートフォリオ
chimi_chia
0
210
What makes a great Director?
_limex_
0
330
ユーザー体験は細部に宿る -ウィジェットQAの挑戦と気づき- / UX is in the details: Challenges and Learnings from Widget QA
bitkey
PRO
0
110
大きな変化の中で、わたしが向き合ったこと #もがく中堅デザイナー
bengo4com
1
1.3k
新卒の目から見たサイボウズのデザイン組織
ryota5884
0
220
mount_company_profile
mount_inc
0
2.3k
越境するデザイン人材:デザイナーが社会資本となる世界へ
goodpatch
0
230
Installing and Running decksh/pdfdeck
ajstarks
1
870
Building Experiences: Design Systems, User Experience, and Full Site Editing
marktimemedia
0
270
デザイナーがはばたく未来の入り口『hatch』が描く、新しいデザイナー育成のカタチ
goodpatch
2
2.1k
Featured
See All Featured
A Tale of Four Properties
chriscoyier
161
23k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
10
890
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
Writing Fast Ruby
sferik
630
62k
Unsuck your backbone
ammeep
671
58k
4 Signs Your Business is Dying
shpigford
185
22k
Build your cross-platform service in a week with App Engine
jlugia
233
18k
Typedesign – Prime Four
hannesfritz
42
2.8k
How GitHub (no longer) Works
holman
315
140k
A designer walks into a library…
pauljervisheath
209
24k
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