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

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

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Masatoshi Kubode Masatoshi Kubode
March 05, 2024
Programming
670
0

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

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

Avatar for Masatoshi Kubode

Masatoshi Kubode

March 05, 2024

More Decks by Masatoshi Kubode

See All by Masatoshi Kubode
3リポジトリーを2ヶ月でモノレポ化した話 / How I turned 3 repositories into a monorepo in 2 months
Avatar for Masatoshi Kubode kubode
0
220
ウォンテッドリーの「ココロオドル」モバイル開発 / Wantedly's "kokoro odoru" mobile development
Avatar for Masatoshi Kubode kubode
2
1.3k
Firebase Dynamic Linksの代替手段を自作する / Create your own Firebase Dynamic Links alternative
Avatar for Masatoshi Kubode kubode
0
720
技術を根付かせる / How to make technology take root
Avatar for Masatoshi Kubode kubode
1
500
WantedlyでのKotlin Multiplatformの導入と課題 / Kotlin Multiplatform Implementation and Challenges at Wantedly
Avatar for Masatoshi Kubode kubode
0
640
Google Play Consoleデベロッパー アカウントの確認 / Verifying your Play Console developer account
Avatar for Masatoshi Kubode kubode
1
1.4k
Make your Android app into Multiplatform app
Avatar for Masatoshi Kubode kubode
0
230
ウォンテッドリーにおけるモバイルアプリ開発 / iOSDC Japan 2024 Sponsor Session
Avatar for Masatoshi Kubode kubode
1
1.5k
Jetpack ComposeのBottomSheetとの戦い / Fight with BottomSheet of Jetpack Compose
Avatar for Masatoshi Kubode kubode
0
1.1k

Other Decks in Programming

See All in Programming
Hunting Vulnerabilities in Symfony with LLMs
Avatar for Vincent Amstoutz vinceamstoutz
0
530
依存関係から依存物へ―Dependencyという言葉の歴史をひも解く
Avatar for j_lee_inst j_lee
0
110
LLM Plugin for Node-REDの利用方法と開発について
Avatar for 404background 404background
0
170
生成AI時代にこそ効くGo | Why Go Works in the Age of Generative AI
Avatar for mom0tomo mom0tomo
8
3.2k
TSKaigi Night Talks 2026_TypeScriptでサプライチェーンの整合性を型に閉じ込める
Avatar for ギークプラス ソフトウェア事業部 geekplus_tech
0
330
3Dシーンの圧縮
Avatar for Fadis fadis
1
690
不変条件と整合性境界—ビジネスが決める設計判断と実現パターン / Invariants and Consistency Boundaries
Avatar for nrs nrslib
13
3.6k
TAKTでAI駆動開発の品質を設計する
Avatar for かとじゅん j5ik2o
6
1.2k
コンテキストの使い捨てをやめる — ビジネスルール駆動開発と miko —
Avatar for ioki ioki
0
180
Lemonade + Foundry Toolkit でお手軽アプリ開発
Avatar for 瀬尾佳隆 seosoft
1
320
Datadog × OpenTelemetry 入門と実践のあいだ
Avatar for Max Kento kn_to_maxpno
1
150
タクシーアプリ『GO』の バックエンド開発のおける AI利活用と若者のすべて
Avatar for Kazuhiko Yamashita pyama86
3
1.9k

Featured

See All Featured
BBQ
Avatar for Matthew Crist matthewcrist
89
10k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
22k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
15k
Exploring the relationship between traditional SERPs and Gen AI search
Avatar for Ray Grieselhuber raygrieselhuber
PRO
2
4k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
34
2.8k
The agentic SEO stack - context over prompts
Avatar for schlessera schlessera
0
810
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6.2k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
230k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
18k
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3.6k
Agile Actions for Facilitating Distributed Teams - ADO2019
Avatar for Mark Kilby mkilby
0
200

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.