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
640
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
740
Building frontend development environment and web performance monitoring
nekobato
2
1.4k
P2P Netfwork with Node.js
nekobato
1
670
Electron年報
nekobato
0
760
Other Decks in Design
See All in Design
Breaking News on the Web
souvikdg
0
380
Designing UIs without a UI designer
strongeron
0
240
MiKS inc. Company PR en_202404
zakkerooni
1
770
生成AIを活用したサービス設計のススメ〜仮説構築編〜
tomo1215
2
1.1k
私の困りごとと解決案 / My issues and proposed solutions
kubosho
1
190
Rebuilding Stamen’s iconic map styles with Stadia Maps
almccon
0
100
新しい資産運用サービスALTERNA(オルタナ)の伝え方の工夫
layerx
PRO
0
1.3k
Shinjuku.rb #91 好きなもの紹介LT大会 "便利"や"役に立つ"とは別方面のRubyをつかったプログラミングがたのしい話
bash0c7
0
130
ダークテーマとアクセシビリティ の融合したカラートークンの設計
degudegu2510
0
370
メドレーという会社と デザインチームのひみつ/About Medley design team
medley
0
740
PdMというキャリアがUXデザイナーの頭によぎったとき スポットライトをどう当て、 どうシステムを見つめるか
muture
0
490
Blender 4.1 で レッツ Vket Cloud!
kamera25
0
200
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
149
45k
Building Your Own Lightsaber
phodgson
101
5.9k
The Mythical Team-Month
searls
217
43k
For a Future-Friendly Web
brad_frost
173
9.2k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
36
9.1k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
In The Pink: A Labor of Love
frogandcode
139
22k
The Brand Is Dead. Long Live the Brand.
mthomps
52
36k
The Invisible Side of Design
smashingmag
294
50k
GraphQLの誤解/rethinking-graphql
sonatard
59
9.6k
Typedesign – Prime Four
hannesfritz
37
2.2k
StorybookのUI Testing Handbookを読んだ
zakiyama
15
4.9k
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