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
ComposeでのShared Element Transition / Shared Element Transition in Compose
Search
Masatoshi Kubode
March 05, 2024
Programming
0
170
ComposeでのShared Element Transition / Shared Element Transition in Compose
https://teamlab.connpass.com/event/310098/
Masatoshi Kubode
March 05, 2024
Tweet
Share
More Decks by Masatoshi Kubode
See All by Masatoshi Kubode
K2への完全移行結果 / Results of complete migration to K2
kubode
1
2k
Data Bindingの移行を楽にする / Easier migration of Data Binding
kubode
0
450
Compose Shadow Alternative
kubode
0
160
アイコンをComposeにする / Compose the Icons
kubode
0
360
デザインシステムのCompose実装 / Design system Compose implementation
kubode
0
440
KMMのCI/CD
kubode
3
690
WantedlyでのCompose導入 / Introducing Jetpack Compose at Wantedly
kubode
1
380
DroidKaigi/conference-app-2022へのContributionが楽しかった話 / Contributing DroidKaigi app was fun!
kubode
0
940
継続的な依存性のアップデートにより得られたこと / What we have learned from continuous dependency updates
kubode
0
390
Other Decks in Programming
See All in Programming
初心者のためのRubyKaigi入門/RubyKaigi Introduction
a_matsuda
7
1k
禅の心を手に入れよ
eltociear
1
180
Random\Randomizer クラスで日常のあれこれを解決しよう! / Random\Randomizer class solves familiar trouble
cocoeyes02
0
250
if constexpr文はテンプレート世界のラムダ式である
faithandbrave
3
650
検証も兼ねて個人開発でHonoとかと向き合った話
hanetsuki
1
1.2k
冗長なエラーログを削減し、スタックトレースを手に入れる / Reducing Verbose Error Logs and Obtaining Stack Traces
upamune
0
870
ADRを一年運用してみた/adr_after_a_year
hanhan1978
7
2.4k
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
110
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
4
980
TYPO3 v13 – The road to LTS: What's new and new APIs
luisasofie_xoxo
0
210
From Spring Boot 2 to Spring Boot 3 with Java 21 and Jakarta EE
ivargrimstad
0
220
サイコロで理解する統計的仮説検定の考え方
tatamiya
4
980
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.6k
A Philosophy of Restraint
colly
197
16k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
227
16k
Building Adaptive Systems
keathley
31
1.9k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
21
1.6k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.6k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
125
32k
Done Done
chrislema
178
15k
Build your cross-platform service in a week with App Engine
jlugia
225
17k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
187
16k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Transcript
© 2024 Wantedly, Inc. Composeでの Shared Element Transition Mobile勉強会#13 2024/03/05
久保出雅俊
© 2024 Wantedly, Inc. wantedly.com/id/kubode X: @swiz_ard GitHub: @kubode
© 2024 Wantedly, Inc. 紹介 Wantedly Visit iOS, Android and
Web 気軽に会社訪問 ミッションや価値観への共感でマッチング • 給与や福利厚⽣などの条件ではなく、想いがあれば会社 の規模にとらわれない まず「話を聞きに⾏く」という新しい体験 • 個⼈と企業がフラットな⽬線で出会えることで、より魅 ⼒的な場所を⾒つけることが可能に
© 2024 Wantedly, Inc. 紹介 Wantedly Visit
© 2024 Wantedly, Inc. 作成する画面 SearchScreen SuggestScreen SearchBar
© 2024 Wantedly, Inc. Shared Element Transition
© 2024 Wantedly, Inc. Shared Element Transitionとは • 画面遷移をシームレスに見 せる手法
• 画面間で共通する要素をア ニメーションさせる • Activity/Fragmentには APIがある(が、難しい) https://developer.android.com/guide/fragments/animate
© 2024 Wantedly, Inc. ComposeでのShared Element Transition実装手法 • 標準的APIはなし •
試した手法 ◦ LookaheadScope + movableContentOf ◦ offsetアニメーション
© 2024 Wantedly, Inc. LookaheadScope + movableContentOf
© 2024 Wantedly, Inc. LookaheadScope + movableContentOf • LookaheadScopeスコープ 内で、描画の前に次のフレー
ムのレイアウトを先読み(look ahead)できる • Shared Element Transitionに使えそうと言わ れていた
© 2024 Wantedly, Inc. LookaheadScope PoC
© 2024 Wantedly, Inc. LookaheadScope PoC それっぽく動くがShared Element以外がアニメーションし ない (Crossfadeさせたい
© 2024 Wantedly, Inc. LookaheadScope PoC
© 2024 Wantedly, Inc. LookaheadScope PoC SearchBarがアニメーション せず、画面全体が Crossfadeしてしまう 🤔
© 2024 Wantedly, Inc. LookaheadScope PoC なぜか? • Crossfade中は2つの画面 が同時に存在する状態
• 👉 movableContentOfが 2回呼ばれ効力がない状態
© 2024 Wantedly, Inc. LookaheadScopeは 要件に合わない😢
© 2024 Wantedly, Inc. offsetアニメーション
© 2024 Wantedly, Inc. offsetアニメーション • Shared Elementを実際に 共有せず、各画面に配置 ◦
画面遷移開始時にShared Elementの オフセット差分を計算 ◦ オフセット差分を0に近づけるように2画 面のShared Elementをアニメーション
© 2024 Wantedly, Inc. offsetアニメーション 遷移の状態管理 遷移中のアニメーション管理 Shared Elementのアニメーション
© 2024 Wantedly, Inc. offsetアニメーション 2画面の実際の Y座標保持と変更
© 2024 Wantedly, Inc. offsetアニメーション Y座標取得とoffset変更
© 2024 Wantedly, Inc. offsetアニメーション SearchからSuggestへ遷移時 SuggestはSearchから逆算 Search側のoffsetアニメーション
© 2024 Wantedly, Inc.
© 2024 Wantedly, Inc. まとめ
© 2024 Wantedly, Inc. まとめ • Shared Element Transitionの実装を紹介 ◦
LookaheadScope +movableContentOf ◦ offsetアニメーション • 要件次第ではLookaheadScopeで十分 • こだわるなら自作 💪
© 2024 Wantedly, Inc.