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
680
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
780
Building frontend development environment and web performance monitoring
nekobato
2
1.4k
P2P Netfwork with Node.js
nekobato
1
710
Electron年報
nekobato
0
790
Other Decks in Design
See All in Design
Yahoo Newsletter Clicker Template
xuechunwu
0
280
Designing and Automating Component Specifications (Into Design Systems)
nathanacurtis
3
400
accfes2024_torque_yamasaki
yuuyamasakiyuu
2
810
デザイナー向け会社紹介資料(採用資料)
dreamarts
0
300
3 Reasons Why I Got into Design
harukausui
1
150
なぜデフォルトが青色!? Tint Colorの理由に迫る
akidon0000
0
360
User Experience Design für Entwickler
joergneumann
4
960
最速で価値を届けるUXリサーチ
degudegu2510
5
1.2k
What Was UX Design All About?
ykazu
3
710
PMとデザイナーはニコイチ! メリットと具体的なアクション10選
mosmos_noki
0
970
知を活かせるチームづくりとは?-MIMIGURIで実践している「全員探究」の仕組みと文化づくり-
chiemitaki
1
630
SpectrumTokyoMeetup12_自動貯金アプリ『finbee』での取り組みについて
shihorishimazu
2
370
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
Making Projects Easy
brettharned
115
5.9k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
49k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
27
1.9k
Teambox: Starting and Learning
jrom
131
8.7k
What's in a price? How to price your products and services
michaelherold
243
11k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
32k
A better future with KSS
kneath
237
17k
Gamification - CAS2011
davidbonilla
80
5k
Happy Clients
brianwarren
97
6.7k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.6k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
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