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
380
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
ウォンテッドリーにおけるモバイルアプリ開発 / iOSDC Japan 2024 Sponsor Session
kubode
1
280
Jetpack ComposeのBottomSheetとの戦い / Fight with BottomSheet of Jetpack Compose
kubode
0
160
Mobile Chapterが目指すところと技術 / Vision and Technology of Mobile Chapter at Wantedly
kubode
0
230
ウォンテッドリーでのKMPワークフロー / KMP workflow at Wantedly
kubode
0
1.4k
K2への完全移行結果 / Results of complete migration to K2
kubode
2
5.4k
Data Bindingの移行を楽にする / Easier migration of Data Binding
kubode
0
1.1k
Compose Shadow Alternative
kubode
0
300
アイコンをComposeにする / Compose the Icons
kubode
0
480
デザインシステムのCompose実装 / Design system Compose implementation
kubode
0
540
Other Decks in Programming
See All in Programming
GoのIteratorに詳しくなってしまう
inatonix
1
210
なぜアジャイルがうまくいかないのか?
yum3
1
100
あなたのアプリ、ログはでてますか?あるいはログをだしてますか? (Funabashi.dev用 軽量版)
uzulla
2
130
サーバーレスで負荷試験!Step Functions + Lambdaを使ったk6の分散実行
shuntakahashi
6
1.6k
開発を加速する共有Swift Package実践
elmetal
PRO
0
420
What you can do with Ruby on WebAssembly
kateinoigakukun
0
170
いつか使える ObjectSpace / Maybe useful ObjectSpace
euglena1215
2
140
Rechartsで楽にゴリゴリにカスタマイズする!
10tera
1
170
unique パッケージから学ぶ interning と weak reference @ Asakusa.go#3
karamaru
2
820
【TID2024】模擬講義:プログラマと一緒にゲームをデザインしてみよう!
akatsukigames_tech
0
670
Our Websites Need a Lifestyle Change, Not a Diet
ryantownsend
0
150
Prolog入門
qnighy
4
1k
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
36
2.1k
Navigating Team Friction
lara
183
13k
How to Ace a Technical Interview
jacobian
274
23k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Teambox: Starting and Learning
jrom
131
8.7k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
278
13k
WebSockets: Embracing the real-time Web
robhawkes
59
7.3k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
For a Future-Friendly Web
brad_frost
174
9.3k
Building Your Own Lightsaber
phodgson
101
6k
GraphQLとの向き合い方2022年版
quramy
43
13k
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.