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
700
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
810
Building frontend development environment and web performance monitoring
nekobato
2
1.4k
P2P Netfwork with Node.js
nekobato
1
730
Electron年報
nekobato
0
810
Other Decks in Design
See All in Design
Карта реализации историй — убийца USM
ashapiro
0
260
How to go from research data to insights?
mastervicedesign
0
180
地図・デザイン・可視化 −情報をわかりやすく伝えるために−
hjmkth
2
530
志ある事業の種を社会に開花させるための挑戦/ Designship2024_Nishimura
root_recruit
0
210
「ちょっといいUI」を目指す努力 / Striving for Little Big Details
usagimaru
6
3.9k
2024/11/25 ReDesigner Online Meetup 会社紹介
cybozuinsideout
PRO
0
270
トップデザインチームが描く、 2030年に活躍するデザイナー
hiranotomoki
2
2.6k
20241204_UI/UXデザイナーLT会 - vol.10_DMM
motokoishida
0
170
Webデザイナーが押さえておきたいエンジニアとの連携ポイント
448jp
0
570
Night Shift concept 9/15/2024
cpineda57
0
750
実利の世界で、表現者である
kiyou77
3
110
20240921-図書館の実空間とデジタル資源の接点をデザインする-dtk55-Designing-the-interface-between-the-library's-physical-space-and-digital-resources
majimasachi
0
380
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
266
13k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Side Projects
sachag
452
42k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
The Cult of Friendly URLs
andyhume
78
6.1k
Gamification - CAS2011
davidbonilla
80
5.1k
Practical Orchestrator
shlominoach
186
10k
Building Applications with DynamoDB
mza
91
6.1k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Building Your Own Lightsaber
phodgson
103
6.1k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
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