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
600
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
660
Building frontend development environment and web performance monitoring
nekobato
2
1.4k
P2P Netfwork with Node.js
nekobato
1
630
Electron年報
nekobato
0
710
Other Decks in Design
See All in Design
2024デザすぷVol.4 新年会/ Design Sprout Bar vol-4
root_recruit
1
260
🇫🇷 Dogmes et Design Systems, comment faire autrement
morganepeng
0
190
ユーザーのためなら 『デザイン』 以外にも手を伸ばせる
navitimejapan
PRO
1
630
Product-Writing
aguringo
5
2.7k
231129_FOSS4G-ASIA-2023_kato
hjmkth
0
270
今日から始めるDesignOpsのヒント
isaikaori
1
390
Desarrollo de Carrera en Diseño y Producto
solmesz1
0
160
Crafting Blog covers: AI tools vs Human Illustrators. Who is the winner?
strongeron
0
120
共創のための地域基盤としての非公式組織の形成 / Informal community as an infrastructure for co-creation
fumiyaakasaka
0
170
Apple提供アプリのナビゲーションバーアイテムクイズ / 20231110-hig
uhooi
1
160
ポートフォリオ思考を通じたデザイナーキャリアの形成と未来への展望
recruitengineers
PRO
3
2.1k
リリース1ヶ月後で機能をなくした話
hinofu
1
650
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
19
1.9k
How GitHub Uses GitHub to Build GitHub
holman
467
290k
What’s in a name? Adding method to the madness
productmarketing
PRO
14
2.6k
YesSQL, Process and Tooling at Scale
rocio
160
13k
The Invisible Customer
myddelton
114
12k
We Have a Design System, Now What?
morganepeng
42
6.7k
Product Roadmaps are Hard
iamctodd
43
9.6k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
16k
How STYLIGHT went responsive
nonsquared
92
4.7k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.8k
Practical Orchestrator
shlominoach
180
9.7k
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