今こそ始める Shared Element Transition

Shibuya.apk #48
https://shibuya-apk.connpass.com/event/325455/

Transcript

1. Shared Element Transition Shibuya.apk #48 2024.8.9
2. ©MIXI 2 Android / iOS / Flutter Android 2014 @oidy & https://speakerdeck.com/mixi_engineers/2024-new-grad-training-android
3. Transition
4. ©MIXI Transition 4 e.g. l / l /
5. Shared Element Transition
6. ©MIXI Shared Element Transition 6
7. ©MIXI Shared Element Transition 7
8. View
9. ©MIXI View ActivityOptions.makeSceneTransitionAnimation() 9 Activity FragmentTransaction.addSharedElement() Fragment Transaction FragmentNavigatorExtras() Fragment Navigation Shared Element Transition ( )
10. Compose Animation
11. ©MIXI Compose Animation 2022 6 : 1.3.0-alpha01 LookaheadLayout 2023 3 : 1.5.0-alpha01 LookaheadLayout LookaheadScope 11 Transition
12. ©MIXI Compose Animation 2022 6 : 1.3.0-alpha01 LookaheadLayout 2023 3 : 1.5.0-alpha01 LookaheadLayout LookaheadScope 2024 4 : 1.7.0-alpha07 Shared Element Transition API 12 LookaheadScope
14. ©MIXI 14
15. ©MIXI ver. 15 Column { var checked by remember { mutableStateOf(false) } Switch( checked = checked, onCheckedChange = { checked = it }, ) if (!checked) { Row { Box(...) // • Box(...) // ▪ } } else { Column { Box(...) // • Box(...) // ▪ } } }
16. ©MIXI 16 Column { var checked by remember { mutableStateOf(false) } Switch( checked = checked, onCheckedChange = { checked = it }, ) if (!checked) { Row { Box(...) // key = "circle" Box(...) // key = "rectangle" } } else { Column { Box(...) // key = "circle" Box(...) // key = "rectangle" } } } Shared Element key
17. ©MIXI key 17 Box( Modifier .sharedElement( state = rememberSharedContentState(key = "circle"), animatedVisibilityScope = animatedVisibilityScope, ) .clip(CircleShape) )
18. ©MIXI key 18 Box( Modifier .sharedElement( state = rememberSharedContentState(key = "circle"), animatedVisibilityScope = animatedVisibilityScope, ) .clip(CircleShape) ) Unresolved reference Unresolved reference
19. ©MIXI 2 Scope 19 SharedTransitionLayout { AnimatedContent(targetState = checked) { targetState -> if (!targetState) { Box( Modifier .sharedElement( state = rememberSharedContentState(key = "circle"), animatedVisibilityScope = this@AnimatedContent, ) ... ) } else { ... } } }
20. ©MIXI 2 Scope 20 SharedTransitionLayout { AnimatedContent(targetState = checked) { targetState -> if (!targetState) { Box( Modifier .sharedElement( state = rememberSharedContentState(key = "circle"), animatedVisibilityScope = this@AnimatedContent, ) ... ) } else { ... } } } SharedTransitionScope SharedTransitionScope
21. ©MIXI 2 Scope 21 SharedTransitionLayout { AnimatedContent(targetState = checked) { targetState -> if (!targetState) { Box( Modifier .sharedElement( state = rememberSharedContentState(key = "circle"), animatedVisibilityScope = this@AnimatedContent, ) ... ) } else { ... } } } AnimatedVisibilityScope
22. ©MIXI 22 if (!targetState) { Row { Box(Modifier.sharedElement(...)...) Box(Modifier.sharedElement(...)...) } } else { Column { Box(Modifier.sharedElement(...)...) Box(Modifier.sharedElement(...)...) } }
23. ©MIXI Composable 23 ... if (!targetState) { StartContent() } else { EndContent() } } @Composable StartContent() { ... } @Composable EndContent() { ... }
24. ©MIXI Composable 24 ... if (!targetState) { StartContent() } else { EndContent() } } @Composable StartContent() { ... } @Composable EndContent() { ... } 2 Scope l l CompositionLocal l Context Receiver
25. ©MIXI Scope 25 if (!targetState) { StartContent( sharedTransitionScope = this@SharedTransitionLayout, animatedVisibilityScope = this@AnimatedContent, ) } else { EndContent( sharedTransitionScope = this@SharedTransitionLayout, animatedVisibilityScope = this@AnimatedContent, ) } @Composable fun StartContent( sharedTransitionScope: SharedTransitionScope, animatedVisibilityScope: AnimatedVisibilityScope, )
26. ©MIXI CompositionLocal Scope 26 SharedTransitionLayout { CompositionLocalProvider(LocalSharedTransitionScope provides this) { AnimatedContent(targetState = checked) { targetState -> CompositionLocalProvider(LocalAnimatedVisibilityScope provides this) { if (!targetState) { StartContent() } else { EndContent() } } } } } @Composable fun StartContent() { val sharedTransitionScope = LocalSharedTransitionScope.current!! val animatedVisibilityScope = LocalAnimatedVisibilityScope.current!! CompositionLocal Scope Scope
27. ©MIXI CompositionLocal Scope 27 SharedTransitionLayout { CompositionLocalProvider(LocalSharedTransitionScope provides this) { AnimatedContent(targetState = checked) { targetState -> CompositionLocalProvider(LocalAnimatedVisibilityScope provides this) { if (!targetState) { StartContent() } else { EndContent() } } } } } @Composable fun StartContent() { val sharedTransitionScope = LocalSharedTransitionScope.current!! val animatedVisibilityScope = LocalAnimatedVisibilityScope.current!!
28. ©MIXI CompositionLocal Scope 28 @Composable fun Modifier.trySharedElement(key: String): Modifier { val sharedTransitionScope = LocalSharedTransitionScope.current val animatedVisibilityScope = LocalAnimatedVisibilityScope.current if (sharedTransitionScope == null || animatedVisibilityScope == null) { // return this } return with(sharedTransitionScope) { sharedElement( state = rememberSharedContentState(key), animatedVisibilityScope = animatedVisibilityScope ) } }
29. ©MIXI CompositionLocal Scope 29 @Composable fun Modifier.trySharedElement(key: String): Modifier { val sharedTransitionScope = LocalSharedTransitionScope.current val animatedVisibilityScope = LocalAnimatedVisibilityScope.current if (sharedTransitionScope == null || animatedVisibilityScope == null) { // return this } return with(sharedTransitionScope) { sharedElement( state = rememberSharedContentState(key), animatedVisibilityScope = animatedVisibilityScope ) } } : Deep Link Shared Element
30. ©MIXI Context Receiver Scope 30 context(SharedTransitionScope, AnimatedVisibilityScope) @Composable fun StartContent() { ... Modifier .sharedBounds( animatedVisibilityScope = this@AnimatedVisibilityScope, ... } SharedTransitionScope AnimatedVisibilityScope StartContent()
31. ©MIXI l Compose Animation 1.7.0-alpha07 l SharedTransitionLayout AnimatedContent UI l SharedTransitionScope AnimatedVisibilityScope Modifier.sharedElement() l Shared Element key 31 Compose Shared Element Transition
32. Navigation
33. ©MIXI Navigation Compose 33 val navController = rememberNavController() NavHost( navController = navController, startDestination = Start, ) { composable<Start> { StartContent(onClick = { navController.navigate(End) }) } composable<End> { EndContent() } }
34. ©MIXI Navigation Compose 34 val navController = rememberNavController() NavHost( navController = navController, startDestination = Start, ) { composable<Start> { StartContent(onClick = { navController.navigate(End) }) } composable<End> { EndContent() } } Navigation 2.8.0 type safe route @Serializable object Start @Serializable object End
35. ©MIXI Navigation Compose 35 val navController = rememberNavController() NavHost( navController = navController, startDestination = Start, ) { composable<Start> { StartContent(onClick = { navController.navigate(End) }) } composable<End> { EndContent() } } AnimatedVisibilityScope
36. ©MIXI SharedTransitionScope OK 36 val navController = rememberNavController() SharedTransitionLayout { NavHost( navController = navController, startDestination = Start, ) { composable<Start> { StartContent(onClick = { navController.navigate(End) }) } composable<End> { EndContent() } } }
38. ©MIXI API e.g. 38 Modifier.sharedElement() Shared Element content content Modifier.sharedBounds()
39. ©MIXI 39 Modifier .sharedElement( clipInOverlayDuringTransition = OverlayClip( clipShape = ... )
40. ©MIXI 40 Modifier .sharedElement( clipInOverlayDuringTransition = OverlayClip( clipShape = ... )
41. ©MIXI 41 Modifier .sharedElement( clipInOverlayDuringTransition = OverlayClip( clipShape = ... )
42. ©MIXI UI 43 Top Bar FAB
43. ©MIXI UI 44 TopAppBar( modifier = Modifier .renderInSharedTransitionScopeOverlay( zIndexInOverlay = 1f ) .animateEnterExit( enter = ..., exit = ..., ), ... )
44. ©MIXI TopAppBar( modifier = Modifier .renderInSharedTransitionScopeOverlay( zIndexInOverlay = 1f ) .animateEnterExit( enter = ..., exit = ..., ), ... ) UI 45 TopAppBar ( )
45. ©MIXI Shared Element Transition l Compose Animation 1.7.0 46 : l Scope l Deep Link beta l Navigation Compose l or