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
580

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
560
技術を根付かせる / How to make technology take root
Avatar for Masatoshi Kubode kubode
1
390
WantedlyでのKotlin Multiplatformの導入と課題 / Kotlin Multiplatform Implementation and Challenges at Wantedly
Avatar for Masatoshi Kubode kubode
0
500
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
180
ウォンテッドリーにおけるモバイルアプリ開発 / iOSDC Japan 2024 Sponsor Session
Avatar for Masatoshi Kubode kubode
1
1.2k
Jetpack ComposeのBottomSheetとの戦い / Fight with BottomSheet of Jetpack Compose
Avatar for Masatoshi Kubode kubode
0
920
Mobile Chapterが目指すところと技術 / Vision and Technology of Mobile Chapter at Wantedly
Avatar for Masatoshi Kubode kubode
0
380

Other Decks in Programming

See All in Programming
『毎日の移動』を支えるGoバックエンド内製開発
Avatar for yutautsugi yutautsugi
2
250
大規模アプリのDIフレームワーク刷新戦略 ～過去最大規模の並行開発を止めずにアプリ全体に導入するまで～
Avatar for GO Inc. dev mot_techtalk
1
450
ALL CODE BASE ARE BELONG TO STUDY
Avatar for uzulla uzulla
21
5.4k
uniqueパッケージの内部実装を支えるweak pointerの話
Avatar for magavel magavel
0
1k
bootcamp2025_バックエンド研修_WebAPIサーバ作成.pdf
Avatar for GENIEE ,Inc geniee_inc
0
110
Foundation Modelsを実装日本語学習アプリを作ってみた！
Avatar for 蛋白（たんぱく・TANPACT） hypebeans
0
110
なぜGoのジェネリクスはこの形なのか？ Featherweight Goが明かす設計の核心
Avatar for Ryotaro ryotaros
7
1.1k
2分台で1500examples完走！爆速CIを支える環境構築術 - Kaigi on Rails 2025
Avatar for Hayato OKUMOTO falcon8823
3
3.6k
チームの境界をブチ抜いていけ
Avatar for tokai235 tokai235
0
180
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
Avatar for Daichi KUDO da1chi
3
2.5k
20251016_Rails News ～Rails 8.1の足音を聴く～
Avatar for Masato Mori morimorihoge
1
320
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
Avatar for Samuel Williams ioquatix
4
2.1k

Featured

See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
9
870
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
280
24k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
347
40k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
27
2k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
24
3.7k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
369
20k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
31
2.7k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.2k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
269
13k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
132
19k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
526
40k

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.