Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ComposeでのShared Element Transition / Shared Ele...

Avatar for Masatoshi Kubode Masatoshi Kubode
March 05, 2024
Programming
0
570

ComposeでのShared Element Transition / Shared Element Transition in Compose

https://teamlab.connpass.com/event/310098/

Avatar for Masatoshi Kubode

Masatoshi Kubode

March 05, 2024
Tweet

More Decks by Masatoshi Kubode

See All by Masatoshi Kubode
ウォンテッドリーの「ココロオドル」モバイル開発 / Wantedly's "kokoro odoru" mobile development
Avatar for Masatoshi Kubode kubode
2
1.1k
Firebase Dynamic Linksの代替手段を自作する / Create your own Firebase Dynamic Links alternative
Avatar for Masatoshi Kubode kubode
0
520
技術を根付かせる / How to make technology take root
Avatar for Masatoshi Kubode kubode
1
380
WantedlyでのKotlin Multiplatformの導入と課題 / Kotlin Multiplatform Implementation and Challenges at Wantedly
Avatar for Masatoshi Kubode kubode
0
470
Google Play Consoleデベロッパー アカウントの確認 / Verifying your Play Console developer account
Avatar for Masatoshi Kubode kubode
1
1.3k
Make your Android app into Multiplatform app
Avatar for Masatoshi Kubode kubode
0
170
ウォンテッドリーにおけるモバイルアプリ開発 / iOSDC Japan 2024 Sponsor Session
Avatar for Masatoshi Kubode kubode
1
1.1k
Jetpack ComposeのBottomSheetとの戦い / Fight with BottomSheet of Jetpack Compose
Avatar for Masatoshi Kubode kubode
0
870
Mobile Chapterが目指すところと技術 / Vision and Technology of Mobile Chapter at Wantedly
Avatar for Masatoshi Kubode kubode
0
370

Other Decks in Programming

See All in Programming
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
Avatar for Tomoki Kobayashi temoki
0
140
TDD 実践ミニトーク
Avatar for Daisuke Garaike contour_gara
1
280
FindyにおけるTakumi活用と脆弱性管理のこれから
Avatar for adachi.ryo rvirus0817
0
360
AIエージェント開発、DevOps and LLMOps
Avatar for Kento.Yamada ymd65536
1
370
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
Avatar for dafujii dafujii
0
230
レガシープロジェクトで最大限AIの恩恵を受けられるようClaude Codeを利用する
Avatar for tk1351 tk1351
4
1.5k
Oracle Database Technology Night 92 Database Connection control FAN-AC
Avatar for oracle4engineer oracle4engineer
PRO
1
360
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
300
OSS開発者という働き方
Avatar for ANDPAD inc andpad
5
1.6k
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
Avatar for mazrean mazrean
1
130
Claude Codeで実装以外の開発フロー、どこまで自動化できるか？失敗と成功
Avatar for ndaDayo.Sugawawa ndadayo
4
1.8k
旅行プランAIエージェント開発の裏側
Avatar for Ippo Matsui / 令和トラベル ippo012
1
600

Featured

See All Featured
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
512
110k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
33
8.8k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
43
7.5k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
36
2.5k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
301
51k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
8
910
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
358
30k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.8k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
71
11k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
54
11k

Transcript

  1. © 2024 Wantedly, Inc. Composeでの Shared Element Transition Mobile勉強会#13 2024/03/05

    久保出雅俊

  2. © 2024 Wantedly, Inc. wantedly.com/id/kubode X: @swiz_ard GitHub: @kubode

  3. © 2024 Wantedly, Inc. 紹介 Wantedly Visit iOS, Android and

    Web 気軽に会社訪問 ミッションや価値観への共感でマッチング • 給与や福利厚⽣などの条件ではなく、想いがあれば会社 の規模にとらわれない まず「話を聞きに⾏く」という新しい体験 • 個⼈と企業がフラットな⽬線で出会えることで、より魅 ⼒的な場所を⾒つけることが可能に

  4. © 2024 Wantedly, Inc. 紹介 Wantedly Visit

  5. © 2024 Wantedly, Inc. 作成する画面 SearchScreen SuggestScreen SearchBar

  6. © 2024 Wantedly, Inc. Shared Element Transition

  7. © 2024 Wantedly, Inc. Shared Element Transitionとは • 画面遷移をシームレスに見 せる手法

    • 画面間で共通する要素をア ニメーションさせる • Activity/Fragmentには APIがある（が、難しい） https://developer.android.com/guide/fragments/animate

  8. © 2024 Wantedly, Inc. ComposeでのShared Element Transition実装手法 • 標準的APIはなし •

    試した手法 ◦ LookaheadScope + movableContentOf ◦ offsetアニメーション

  9. © 2024 Wantedly, Inc. LookaheadScope + movableContentOf

  10. © 2024 Wantedly, Inc. LookaheadScope + movableContentOf • LookaheadScopeスコープ 内で、描画の前に次のフレー

    ムのレイアウトを先読み（look ahead）できる • Shared Element Transitionに使えそうと言わ れていた

  11. © 2024 Wantedly, Inc. LookaheadScope PoC

  12. © 2024 Wantedly, Inc. LookaheadScope PoC それっぽく動くがShared Element以外がアニメーションし ない （Crossfadeさせたい

  13. © 2024 Wantedly, Inc. LookaheadScope PoC

  14. © 2024 Wantedly, Inc. LookaheadScope PoC SearchBarがアニメーション せず、画面全体が Crossfadeしてしまう 🤔

  15. © 2024 Wantedly, Inc. LookaheadScope PoC なぜか？ • Crossfade中は2つの画面 が同時に存在する状態

    • 👉 movableContentOfが 2回呼ばれ効力がない状態

  16. © 2024 Wantedly, Inc. LookaheadScopeは 要件に合わない😢

  17. © 2024 Wantedly, Inc. offsetアニメーション

  18. © 2024 Wantedly, Inc. offsetアニメーション • Shared Elementを実際に 共有せず、各画面に配置 ◦

    画面遷移開始時にShared Elementの オフセット差分を計算 ◦ オフセット差分を0に近づけるように2画 面のShared Elementをアニメーション

  19. © 2024 Wantedly, Inc. offsetアニメーション 遷移の状態管理 遷移中のアニメーション管理 Shared Elementのアニメーション

  20. © 2024 Wantedly, Inc. offsetアニメーション 2画面の実際の Y座標保持と変更

  21. © 2024 Wantedly, Inc. offsetアニメーション Y座標取得とoffset変更

  22. © 2024 Wantedly, Inc. offsetアニメーション SearchからSuggestへ遷移時 SuggestはSearchから逆算 Search側のoffsetアニメーション

  23. © 2024 Wantedly, Inc.

  24. © 2024 Wantedly, Inc. まとめ

  25. © 2024 Wantedly, Inc. まとめ • Shared Element Transitionの実装を紹介 ◦

    LookaheadScope +movableContentOf ◦ offsetアニメーション • 要件次第ではLookaheadScopeで十分 • こだわるなら自作 💪

  26. © 2024 Wantedly, Inc.