Tweet
Tweet

Slide 1

Slide 1 text

© 2024 Wantedly, Inc. Composeでの Shared Element Transition Mobile勉強会#13 2024/03/05 久保出雅俊

Slide 2

Slide 2 text

© 2024 Wantedly, Inc. wantedly.com/id/kubode X: @swiz_ard GitHub: @kubode

Slide 3

Slide 3 text

© 2024 Wantedly, Inc. 紹介 Wantedly Visit iOS, Android and Web 気軽に会社訪問 ミッションや価値観への共感でマッチング ● 給与や福利厚⽣などの条件ではなく、想いがあれば会社 の規模にとらわれない まず「話を聞きに⾏く」という新しい体験 ● 個⼈と企業がフラットな⽬線で出会えることで、より魅 ⼒的な場所を⾒つけることが可能に

Slide 4

Slide 4 text

© 2024 Wantedly, Inc. 紹介 Wantedly Visit

Slide 5

Slide 5 text

© 2024 Wantedly, Inc. 作成する画面 SearchScreen SuggestScreen SearchBar

Slide 6

Slide 6 text

© 2024 Wantedly, Inc. Shared Element Transition

Slide 7

Slide 7 text

© 2024 Wantedly, Inc. Shared Element Transitionとは ● 画面遷移をシームレスに見 せる手法 ● 画面間で共通する要素をア ニメーションさせる ● Activity/Fragmentには APIがある（が、難しい） https://developer.android.com/guide/fragments/animate

Slide 8

Slide 8 text

© 2024 Wantedly, Inc. ComposeでのShared Element Transition実装手法 ● 標準的APIはなし ● 試した手法 ○ LookaheadScope + movableContentOf ○ offsetアニメーション

Slide 9

Slide 9 text

© 2024 Wantedly, Inc. LookaheadScope + movableContentOf

Slide 10

Slide 10 text

© 2024 Wantedly, Inc. LookaheadScope + movableContentOf ● LookaheadScopeスコープ 内で、描画の前に次のフレー ムのレイアウトを先読み（look ahead）できる ● Shared Element Transitionに使えそうと言わ れていた

Slide 11

Slide 11 text

© 2024 Wantedly, Inc. LookaheadScope PoC

Slide 12

Slide 12 text

© 2024 Wantedly, Inc. LookaheadScope PoC それっぽく動くがShared Element以外がアニメーションし ない （Crossfadeさせたい

Slide 13

Slide 13 text

© 2024 Wantedly, Inc. LookaheadScope PoC

Slide 14

Slide 14 text

© 2024 Wantedly, Inc. LookaheadScope PoC SearchBarがアニメーション せず、画面全体が Crossfadeしてしまう 🤔

Slide 15

Slide 15 text

© 2024 Wantedly, Inc. LookaheadScope PoC なぜか？ ● Crossfade中は2つの画面 が同時に存在する状態 ● 👉 movableContentOfが 2回呼ばれ効力がない状態

Slide 16

Slide 16 text

© 2024 Wantedly, Inc. LookaheadScopeは 要件に合わない😢

Slide 17

Slide 17 text

© 2024 Wantedly, Inc. offsetアニメーション

Slide 18

Slide 18 text

© 2024 Wantedly, Inc. offsetアニメーション ● Shared Elementを実際に 共有せず、各画面に配置 ○ 画面遷移開始時にShared Elementの オフセット差分を計算 ○ オフセット差分を0に近づけるように2画 面のShared Elementをアニメーション

Slide 19

Slide 19 text

© 2024 Wantedly, Inc. offsetアニメーション 遷移の状態管理 遷移中のアニメーション管理 Shared Elementのアニメーション

Slide 20

Slide 20 text

© 2024 Wantedly, Inc. offsetアニメーション 2画面の実際の Y座標保持と変更

Slide 21

Slide 21 text

© 2024 Wantedly, Inc. offsetアニメーション Y座標取得とoffset変更

Slide 22

Slide 22 text

© 2024 Wantedly, Inc. offsetアニメーション SearchからSuggestへ遷移時 SuggestはSearchから逆算 Search側のoffsetアニメーション

Slide 23

Slide 23 text

© 2024 Wantedly, Inc.

Slide 24

Slide 24 text

© 2024 Wantedly, Inc. まとめ

Slide 25

Slide 25 text

© 2024 Wantedly, Inc. まとめ ● Shared Element Transitionの実装を紹介 ○ LookaheadScope +movableContentOf ○ offsetアニメーション ● 要件次第ではLookaheadScopeで十分 ● こだわるなら自作 💪

Slide 26

Slide 26 text

© 2024 Wantedly, Inc.