Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ComposeでのShared Element Transition / Shared Ele...

Avatar for Masatoshi Kubode Masatoshi Kubode
March 05, 2024
Programming
0
630

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

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

Avatar for Masatoshi Kubode

Masatoshi Kubode

March 05, 2024
Tweet

More Decks by Masatoshi Kubode

See All by Masatoshi Kubode
3リポジトリーを2ヶ月でモノレポ化した話 / How I turned 3 repositories into a monorepo in 2 months
Avatar for Masatoshi Kubode kubode
0
130
ウォンテッドリーの「ココロオドル」モバイル開発 / Wantedly's "kokoro odoru" mobile development
Avatar for Masatoshi Kubode kubode
2
1.2k
Firebase Dynamic Linksの代替手段を自作する / Create your own Firebase Dynamic Links alternative
Avatar for Masatoshi Kubode kubode
0
640
技術を根付かせる / How to make technology take root
Avatar for Masatoshi Kubode kubode
1
450
WantedlyでのKotlin Multiplatformの導入と課題 / Kotlin Multiplatform Implementation and Challenges at Wantedly
Avatar for Masatoshi Kubode kubode
0
570
Google Play Consoleデベロッパー アカウントの確認 / Verifying your Play Console developer account
Avatar for Masatoshi Kubode kubode
1
1.4k
Make your Android app into Multiplatform app
Avatar for Masatoshi Kubode kubode
0
190
ウォンテッドリーにおけるモバイルアプリ開発 / iOSDC Japan 2024 Sponsor Session
Avatar for Masatoshi Kubode kubode
1
1.4k
Jetpack ComposeのBottomSheetとの戦い / Fight with BottomSheet of Jetpack Compose
Avatar for Masatoshi Kubode kubode
0
1k

Other Decks in Programming

See All in Programming
責任感のあるCloudWatchアラームを設計しよう
Avatar for アキキー akihisaikeda
3
160
CSC307 Lecture 04
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
650
AI Agent の開発と運用を支える Durable Execution #AgentsInProd
Avatar for izumin5210 izumin5210
7
2.3k
QAフローを最適化し、品質水準を満たしながらリリースまでの期間を最短化する #RSGT2026
Avatar for shibayu36 shibayu36
2
4.3k
コマンドとリード間の連携に対する脅威分析フレームワーク
Avatar for Aja9tochin pandayumi
1
450
OSSとなったswift-buildで Xcodeのビルドを差し替えられるため 自分でXcodeを直せる時代になっている ダイアモンド問題編
Avatar for yimajo yimajo
3
600
Oxlint JS plugins
Avatar for kazupon kazupon
1
620
AI前提で考えるiOSアプリのモダナイズ設計
Avatar for 野瀬田　裕樹 yuukiw00w
0
220
プロダクトオーナーから見たSOC2 _SOC2ゆるミートアップ#2
Avatar for Kenta Suzuki kekekenta
0
200
360° Signals in Angular: Signal Forms with SignalStore & Resources @ngLondon 01/2026
Avatar for Manfred Steyer manfredsteyer
PRO
0
110
OCaml 5でモダンな並列プログラミングを Enjoyしよう!
Avatar for Haochen Kotoi-Xie haochenx
0
120
登壇資料を作る時に意識していること #登壇資料_findy
Avatar for konifar konifar
4
930

Featured

See All Featured
Fireside Chat
Avatar for paigeccino paigeccino
41
3.8k
Conquering PDFs: document understanding beyond plain text
Avatar for Ines Montani inesmontani
PRO
4
2.3k
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
Avatar for Greg Gifford greggifford
PRO
0
76
KATA
Avatar for Megan Lloyd mclloyd
PRO
34
15k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
54k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
356
21k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
280
How to Grow Your eCommerce with AI & Automation
Avatar for Katarina Dahlin katarinadahlin
PRO
0
100
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
5
880
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
96
14k
Music & Morning Musume
Avatar for Bryan Veloso bryan
47
7.1k

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.