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
500
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
170
技術を根付かせる / How to make technology take root
kubode
1
300
WantedlyでのKotlin Multiplatformの導入と課題 / Kotlin Multiplatform Implementation and Challenges at Wantedly
kubode
0
370
Google Play Consoleデベロッパー アカウントの確認 / Verifying your Play Console developer account
kubode
1
1.1k
Make your Android app into Multiplatform app
kubode
0
120
ウォンテッドリーにおけるモバイルアプリ開発 / iOSDC Japan 2024 Sponsor Session
kubode
1
900
Jetpack ComposeのBottomSheetとの戦い / Fight with BottomSheet of Jetpack Compose
kubode
0
650
Mobile Chapterが目指すところと技術 / Vision and Technology of Mobile Chapter at Wantedly
kubode
0
330
ウォンテッドリーでのKMPワークフロー / KMP workflow at Wantedly
kubode
0
1.7k
Other Decks in Programming
See All in Programming
remix + cloudflare workers (DO) docker上でいい感じに開発する
yoshidatomoaki
0
120
SLI/SLOの設定を進めるその前に アラート品質の改善に取り組んだ話
tanden
2
690
Scala 3 で GLSL のための c-like-for を実装してみた
exoego
1
180
データベースエンジニアの仕事を楽にする。PgAssistantの紹介
nnaka2992
9
4.1k
CRE Meetup!ユーザー信頼性を支えるエンジニアリング実践例の発表資料です
tmnb
0
280
CTFのWebにおける⾼難易度問題について
hamayanhamayan
1
950
技術好きなエンジニアが "リーダーへの進化" によって得たものと失ったもの
pospome
5
1.3k
2025/3/18 サービスの成長で生じる幅広いパフォーマンスの問題を、 AIで手軽に解決する
shirahama_x
0
160
生産性アップのためのAI個人活用
kunoyasu
0
480
いまさら聞けない生成AI入門: 「生成AIを高速キャッチアップ」
soh9834
12
3.5k
RCPと宣言型ポリシーについてのお話し
kokitamura
2
140
GDG Super.init(version=6) - From Where to Wear : 모바일 개발자가 워치에서 발견한 인사이트
haeti2
0
550
Featured
See All Featured
Side Projects
sachag
452
42k
Navigating Team Friction
lara
183
15k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.3k
It's Worth the Effort
3n
184
28k
Adopting Sorbet at Scale
ufuk
75
9.3k
GitHub's CSS Performance
jonrohan
1030
460k
Making the Leap to Tech Lead
cromwellryan
133
9.2k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Product Roadmaps are Hard
iamctodd
PRO
52
11k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.6k
Git: the NoSQL Database
bkeepers
PRO
429
65k
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.