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

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

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
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
AIチャットの改善から見えた、良いAI体験とは / What Constitutes a Good AI Experience: Insights from Improving AI Chat
Avatar for Masatoshi Kubode kubode
0
150
3リポジトリーを2ヶ月でモノレポ化した話 / How I turned 3 repositories into a monorepo in 2 months
Avatar for Masatoshi Kubode kubode
0
250
ウォンテッドリーの「ココロオドル」モバイル開発 / Wantedly's "kokoro odoru" mobile development
Avatar for Masatoshi Kubode kubode
2
1.4k
Firebase Dynamic Linksの代替手段を自作する / Create your own Firebase Dynamic Links alternative
Avatar for Masatoshi Kubode kubode
0
730
技術を根付かせる / 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
650
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
240
ウォンテッドリーにおけるモバイルアプリ開発 / iOSDC Japan 2024 Sponsor Session
Avatar for Masatoshi Kubode kubode
1
1.5k

Other Decks in Programming

See All in Programming
【やさしく解説 設計編・中級 #1】一つの車に、運転手は一人　～ある倉庫システムの事例から～
Avatar for HideyukiKitao panda728
PRO
0
200
人間の目はかわらない、だからJPEGは30年もつ
Avatar for yuzneri yuzneri
12
16k
作るコストが小さくなった時代 幸せに働くために改めて考えたいこと 〜エンジニアとして価値を出し続けるために注視している二分野〜
Avatar for YuppeEng yuppeeng
0
130
jsmini JavaScript Engine を作ってみた話
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
0
240
はてなアカウント基盤 State of the Union
Avatar for cockscomb cockscomb
1
1.3k
「正の参照」と 「負の導出」で組む ハーネスエンジニアリング
Avatar for Masahiro Watanabe cottpan
1
150
エンジニアにデザインハーネスを 〜デザインプロセスを規定するためのハーネス〜 / Design harness from an engineer's perspective
Avatar for r-kagaya rkaga
2
1.7k
Go言語とトイモデルで学ぶTransformerの気持ち / fukuokago23-transformer
Avatar for monochromegane monochromegane
0
140
地域 SRE コミュニティ最前線 - ホンマでっかSRE勉強会
Avatar for tk3fftk tk3fftk
0
280
AWS CDK を「作」ってみた 〜フルスクラッチで見えた CDK の裏側〜 / aws-cdk-from-scratch
Avatar for k.goto gotok365
3
2.6k
Welcome to the "Parametricity" 🏙️ − Generic だけど Specific な世界 −
Avatar for TAKASE Kazuyuki guvalif
PRO
1
180
なぜ関数型プログラミングで「型」と「証明」が語られるのか #fp_matsuri
Avatar for Takuma Kajikawa kajitack
3
1k

Featured

See All Featured
WCS-LA-2024
Avatar for Leonardo Collado-Torres lcolladotor
0
760
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
201
75k
Visualization
Avatar for Eitan Lees eitanlees
152
17k
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
510
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
920
Conquering PDFs: document understanding beyond plain text
Avatar for Ines Montani inesmontani
PRO
4
2.9k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k
Ten Tips & Tricks for a 🌱 transition
Avatar for Manu Carrasco Molina stuffmc
0
160
A Guide to Academic Writing Using Generative AI - A Workshop
Avatar for Kenji Saito ks91
PRO
1
360
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1033
470k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
8.2k
How to build a perfect <img>
Avatar for Jono Alderson jonoalderson
1
5.8k

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.