Mobile Animation Tuning

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でおｋ（モバイル用途では）

って思うじゃん 12 width, heightなどのstyleで動かす　　& ペイントエリアを意図的に縮小したい場合は未だにハックとして translate3d(0, 0, 0);　を使う
（これより良い方法あったら教えてください） USBOTGPSNͰ͸ͳ͍"OJNBUJPO Կ΋ࢦఆ͠ͳ͍ͱϖΠϯτΤϦΞ͸͜͜ ਌ཁૉ

Animations 13 - 作ったAnimationの確認 - 気になるAnimationの解析

Animations 14

Render 15

まとめ 16 - ペイントエリアを最小限に保つ - ペイントエリアが増えるとGPU処理が増える - アイドル状態でレイヤーが最小限になるようにする - レイヤーが増えるとメモリが増える

END 17

Mobile Animation Tuning

Mobile Animation Tuning

Hayato Koriyama

More Decks by Hayato Koriyama

Other Decks in Design

Featured

Transcript