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 Ele...
Search
Masatoshi Kubode
March 05, 2024
Programming
0
510
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
Firebase Dynamic Linksの代替手段を自作する / Create your own Firebase Dynamic Links alternative
kubode
0
240
技術を根付かせる / How to make technology take root
kubode
1
310
WantedlyでのKotlin Multiplatformの導入と課題 / Kotlin Multiplatform Implementation and Challenges at Wantedly
kubode
0
390
Google Play Consoleデベロッパー アカウントの確認 / Verifying your Play Console developer account
kubode
1
1.2k
Make your Android app into Multiplatform app
kubode
0
130
ウォンテッドリーにおけるモバイルアプリ開発 / iOSDC Japan 2024 Sponsor Session
kubode
1
930
Jetpack ComposeのBottomSheetとの戦い / Fight with BottomSheet of Jetpack Compose
kubode
0
680
Mobile Chapterが目指すところと技術 / Vision and Technology of Mobile Chapter at Wantedly
kubode
0
340
ウォンテッドリーでのKMPワークフロー / KMP workflow at Wantedly
kubode
0
1.7k
Other Decks in Programming
See All in Programming
フロントエンドテストの育て方
quramy
11
3k
List とは何か? / PHPerKaigi 2025
meihei3
0
790
PHPバージョンアップから始めるOSSコントリビュート / how2oss-contribute
dmnlk
1
1k
ミリしらMCP勉強会
watany
4
740
スモールスタートで始めるためのLambda×モノリス(Lambdalith)
akihisaikeda
2
250
リアルタイムレイトレーシング + ニューラルレンダリング簡単紹介 / Real-Time Ray Tracing & Neural Rendering: A Quick Introduction (2025)
shocker_0x15
1
300
エンジニア未経験が最短で戦力になるためのTips
gokana
0
270
Strategic Design (DDD)for the Frontend @DDD Meetup Stuttgart
manfredsteyer
PRO
0
120
Coding Experience Cpp vs Csharp - meetup app osaka@9
harukasao
0
740
S3静的ホスティング+Next.js静的エクスポート で格安webアプリ構築
iharuoru
0
220
Boost Your Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
1.4k
API for docs
soutaro
2
1k
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
137
6.9k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.3k
Building a Modern Day E-commerce SEO Strategy
aleyda
40
7.2k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.1k
YesSQL, Process and Tooling at Scale
rocio
172
14k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
5
520
We Have a Design System, Now What?
morganepeng
52
7.5k
Practical Orchestrator
shlominoach
186
10k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.3k
A Tale of Four Properties
chriscoyier
158
23k
Code Reviewing Like a Champion
maltzj
522
39k
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.