ComposeでのShared Element Transition / Shared Element Transition in Compose

https://teamlab.connpass.com/event/310098/

Transcript

1. © 2024 Wantedly, Inc. Composeでの Shared Element Transition Mobile勉強会#13 2024/03/05 久保出雅俊
2. © 2024 Wantedly, Inc. wantedly.com/id/kubode X: @swiz_ard GitHub: @kubode
3. © 2024 Wantedly, Inc. 紹介 Wantedly Visit iOS, Android and Web 気軽に会社訪問 ミッションや価値観への共感でマッチング • 給与や福利厚⽣などの条件ではなく、想いがあれば会社 の規模にとらわれない まず「話を聞きに⾏く」という新しい体験 • 個⼈と企業がフラットな⽬線で出会えることで、より魅 ⼒的な場所を⾒つけることが可能に
4. © 2024 Wantedly, Inc. 紹介 Wantedly Visit
5. © 2024 Wantedly, Inc. 作成する画面 SearchScreen SuggestScreen SearchBar
6. © 2024 Wantedly, Inc. Shared Element Transition
7. © 2024 Wantedly, Inc. Shared Element Transitionとは • 画面遷移をシームレスに見 せる手法 • 画面間で共通する要素をア ニメーションさせる • Activity/Fragmentには APIがある（が、難しい） https://developer.android.com/guide/fragments/animate
8. © 2024 Wantedly, Inc. ComposeでのShared Element Transition実装手法 • 標準的APIはなし • 試した手法 ◦ LookaheadScope + movableContentOf ◦ offsetアニメーション
9. © 2024 Wantedly, Inc. LookaheadScope + movableContentOf
10. © 2024 Wantedly, Inc. LookaheadScope + movableContentOf • LookaheadScopeスコープ 内で、描画の前に次のフレー ムのレイアウトを先読み（look ahead）できる • Shared Element Transitionに使えそうと言わ れていた
11. © 2024 Wantedly, Inc. LookaheadScope PoC
12. © 2024 Wantedly, Inc. LookaheadScope PoC それっぽく動くがShared Element以外がアニメーションし ない （Crossfadeさせたい
13. © 2024 Wantedly, Inc. LookaheadScope PoC
14. © 2024 Wantedly, Inc. LookaheadScope PoC SearchBarがアニメーション せず、画面全体が Crossfadeしてしまう 🤔
15. © 2024 Wantedly, Inc. LookaheadScope PoC なぜか？ • Crossfade中は2つの画面 が同時に存在する状態 • 👉 movableContentOfが 2回呼ばれ効力がない状態
16. © 2024 Wantedly, Inc. LookaheadScopeは 要件に合わない😢
17. © 2024 Wantedly, Inc. offsetアニメーション
18. © 2024 Wantedly, Inc. offsetアニメーション • Shared Elementを実際に 共有せず、各画面に配置 ◦ 画面遷移開始時にShared Elementの オフセット差分を計算 ◦ オフセット差分を0に近づけるように2画 面のShared Elementをアニメーション
19. © 2024 Wantedly, Inc. offsetアニメーション 遷移の状態管理 遷移中のアニメーション管理 Shared Elementのアニメーション
20. © 2024 Wantedly, Inc. offsetアニメーション 2画面の実際の Y座標保持と変更
21. © 2024 Wantedly, Inc. offsetアニメーション Y座標取得とoffset変更
22. © 2024 Wantedly, Inc. offsetアニメーション SearchからSuggestへ遷移時 SuggestはSearchから逆算 Search側のoffsetアニメーション
23. © 2024 Wantedly, Inc.
24. © 2024 Wantedly, Inc. まとめ
25. © 2024 Wantedly, Inc. まとめ • Shared Element Transitionの実装を紹介 ◦ LookaheadScope +movableContentOf ◦ offsetアニメーション • 要件次第ではLookaheadScopeで十分 • こだわるなら自作 💪
26. © 2024 Wantedly, Inc.