Shared Element Transition Shibuya.apk #48 2024.8.9

©MIXI 2 Android / iOS / Flutter Android 2014 @oidy & https://speakerdeck.com/mixi_engineers/2024-new-grad-training-android

Transition

©MIXI Transition 4 e.g. l / l /

Shared Element Transition

©MIXI Shared Element Transition 6

©MIXI Shared Element Transition 7

View

©MIXI View ActivityOptions.makeSceneTransitionAnimation() 9 Activity FragmentTransaction.addSharedElement() Fragment Transaction FragmentNavigatorExtras() Fragment Navigation Shared Element Transition ( )

Compose Animation

©MIXI Compose Animation 2022 6 : 1.3.0-alpha01 LookaheadLayout 2023 3 : 1.5.0-alpha01 LookaheadLayout LookaheadScope 11 Transition

©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

No content

©MIXI 14

©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(...) // ■ } } }

©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

©MIXI key 17 Box( Modifier .sharedElement( state = rememberSharedContentState(key = "circle"), animatedVisibilityScope = animatedVisibilityScope, ) .clip(CircleShape) )

©MIXI key 18 Box( Modifier .sharedElement( state = rememberSharedContentState(key = "circle"), animatedVisibilityScope = animatedVisibilityScope, ) .clip(CircleShape) ) Unresolved reference Unresolved reference

©MIXI 2 Scope 19 SharedTransitionLayout { AnimatedContent(targetState = checked) { targetState -> if (!targetState) { Box( Modifier .sharedElement( state = rememberSharedContentState(key = "circle"), animatedVisibilityScope = this@AnimatedContent, ) ... ) } else { ... } } }

©MIXI 2 Scope 20 SharedTransitionLayout { AnimatedContent(targetState = checked) { targetState -> if (!targetState) { Box( Modifier .sharedElement( state = rememberSharedContentState(key = "circle"), animatedVisibilityScope = this@AnimatedContent, ) ... ) } else { ... } } } SharedTransitionScope SharedTransitionScope

©MIXI 2 Scope 21 SharedTransitionLayout { AnimatedContent(targetState = checked) { targetState -> if (!targetState) { Box( Modifier .sharedElement( state = rememberSharedContentState(key = "circle"), animatedVisibilityScope = this@AnimatedContent, ) ... ) } else { ... } } } AnimatedVisibilityScope

©MIXI 22 if (!targetState) { Row { Box(Modifier.sharedElement(...)...) Box(Modifier.sharedElement(...)...) } } else { Column { Box(Modifier.sharedElement(...)...) Box(Modifier.sharedElement(...)...) } }

©MIXI Composable 23 ... if (!targetState) { StartContent() } else { EndContent() } } @Composable StartContent() { ... } @Composable EndContent() { ... }

©MIXI Composable 24 ... if (!targetState) { StartContent() } else { EndContent() } } @Composable StartContent() { ... } @Composable EndContent() { ... } 2 Scope l l CompositionLocal l Context Receiver

©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, )

©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

©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!!

©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 ) } }

©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

©MIXI Context Receiver Scope 30 context(SharedTransitionScope, AnimatedVisibilityScope) @Composable fun StartContent() { ... Modifier .sharedBounds( animatedVisibilityScope = this@AnimatedVisibilityScope, ... } SharedTransitionScope AnimatedVisibilityScope StartContent()

©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

Navigation

©MIXI Navigation Compose 33 val navController = rememberNavController() NavHost( navController = navController, startDestination = Start, ) { composable { StartContent(onClick = { navController.navigate(End) }) } composable { EndContent() } }

©MIXI Navigation Compose 34 val navController = rememberNavController() NavHost( navController = navController, startDestination = Start, ) { composable { StartContent(onClick = { navController.navigate(End) }) } composable { EndContent() } } Navigation 2.8.0 type safe route @Serializable object Start @Serializable object End

©MIXI Navigation Compose 35 val navController = rememberNavController() NavHost( navController = navController, startDestination = Start, ) { composable { StartContent(onClick = { navController.navigate(End) }) } composable { EndContent() } } AnimatedVisibilityScope

©MIXI SharedTransitionScope OK 36 val navController = rememberNavController() SharedTransitionLayout { NavHost( navController = navController, startDestination = Start, ) { composable { StartContent(onClick = { navController.navigate(End) }) } composable { EndContent() } } }

No content

©MIXI API e.g. 38 Modifier.sharedElement() Shared Element content content Modifier.sharedBounds()

©MIXI 39 Modifier .sharedElement( clipInOverlayDuringTransition = OverlayClip( clipShape = ... )

©MIXI 40 Modifier .sharedElement( clipInOverlayDuringTransition = OverlayClip( clipShape = ... )

©MIXI 41 Modifier .sharedElement( clipInOverlayDuringTransition = OverlayClip( clipShape = ... )

©MIXI UI 43 Top Bar FAB

©MIXI UI 44 TopAppBar( modifier = Modifier .renderInSharedTransitionScopeOverlay( zIndexInOverlay = 1f ) .animateEnterExit( enter = ..., exit = ..., ), ... )

©MIXI TopAppBar( modifier = Modifier .renderInSharedTransitionScopeOverlay( zIndexInOverlay = 1f ) .animateEnterExit( enter = ..., exit = ..., ), ... ) UI 45 TopAppBar ( )

©MIXI Shared Element Transition l Compose Animation 1.7.0 46 : l Scope l Deep Link beta l Navigation Compose l or

No content