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
550
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
ウォンテッドリーの「ココロオドル」モバイル開発 / Wantedly's "kokoro odoru" mobile development
kubode
2
1k
Firebase Dynamic Linksの代替手段を自作する / Create your own Firebase Dynamic Links alternative
kubode
0
440
技術を根付かせる / How to make technology take root
kubode
1
360
WantedlyでのKotlin Multiplatformの導入と課題 / Kotlin Multiplatform Implementation and Challenges at Wantedly
kubode
0
450
Google Play Consoleデベロッパー アカウントの確認 / Verifying your Play Console developer account
kubode
1
1.3k
Make your Android app into Multiplatform app
kubode
0
160
ウォンテッドリーにおけるモバイルアプリ開発 / iOSDC Japan 2024 Sponsor Session
kubode
1
1.1k
Jetpack ComposeのBottomSheetとの戦い / Fight with BottomSheet of Jetpack Compose
kubode
0
820
Mobile Chapterが目指すところと技術 / Vision and Technology of Mobile Chapter at Wantedly
kubode
0
360
Other Decks in Programming
See All in Programming
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
twada
PRO
34
9.8k
可変性を制する設計: 構造と振る舞いから考える概念モデリングとその実装
a_suenami
7
980
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
2
720
Jakarta EE Meets AI
ivargrimstad
0
350
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
470
なぜあなたのオブザーバビリティ導入は頓挫するのか
ryota_hnk
3
500
中級グラフィックス入門~効率的なメッシュレット描画~
projectasura
3
1.6k
iOS開発スターターキットの作り方
akidon0000
0
200
マッチングアプリにおけるフリックUIで苦労したこと
yuheiito
0
240
効率的な開発手段として VRTを活用する
ishkawa
1
180
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
1k
[Codecon - 2025] Como não odiar seus testes
camilacampos
0
100
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
760
The World Runs on Bad Software
bkeepers
PRO
70
11k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Thoughts on Productivity
jonyablonski
69
4.8k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
RailsConf 2023
tenderlove
30
1.2k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Documentation Writing (for coders)
carmenintech
72
4.9k
4 Signs Your Business is Dying
shpigford
184
22k
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.