Layout Animations Show - KotlinConf2023

Transcript

1. @nicole_terc KotlinConf’23 Amsterdam Layout Animations Show! Nicole Terc
2. Layout Animations Show! Nicole Terc
3. Nicole Terc nicole_terc nicole-terc
4. Program 1. Layout Animation Basics 2. Composable Animation APIs 3. Animations Customization
5. 1. Layout Animation Basics 2. Composable Animation APIs 3. Animations Customization 4. Random shapes! Program
6. Basics
7. Layout Animations - What?
8. Layout Animations - What? Animations that animate content changes in Layouts.
9. Layout Animations - What? Animations that animate content changes in Layouts.
10. Layout Animations - What do we need? 1. Content Changes
11. Layout Animations - What do we need? 1. Observe Content Changes
12. Observe Content Changes? STATES!
13. States
14. States var viewColor by remember { mutableStateOf(Color.Blue) } var viewScale by remember { mutableStateOf(0.5f) }
15. States var viewColor by remember { mutableStateOf(Color.Blue) } var viewScale by remember { mutableStateOf(0.5f) } Box( modifier = Modifier .scale(viewScale) .background(viewColor) )
16. Layout Animations - What do we need? 1. Observe Content Changes
17. Layout Animations - What do we need? 1. States
18. Layout Animations - What do we need? 1. States 2. Animation APIs
19. Layout Animations APIs? Source: https://developer.android.com/jetpack/compose/animation
20. Layout Animations APIs?
21. • Composables APIs Closer Look • Modifiers
22. • Composables APIs Closer Look
23. Composable APIs
24. Composable APIs Composable functions that handle all the animation logic AmazingUI( ... )
25. Composable APIs Composable functions that handle all the animation logic AnimationComposable() { AmazingUI( ... ) }
26. Composable APIs Composable functions that handle all the animation logic AnimationComposable() { <- Does all the work! AmazingUI( ... ) }
27. Composable APIs Composable functions that handle all the animation logic AnimationComposable(targetState = state) { <- Does all the work! AmazingUI( ... ) }
28. Let’s start the show!
29. What do we need for a great show? 1. Curtain 2. Conductor 3. Performers
30. The Curtain! AnimatedVisibility
31. Animated Visibility
32. Animated Visibility isVisible = true isVisible = false
33. Animated Visibility
34. Animated Visibility var isVisible by remember { mutableStateOf(true) }
35. Animated Visibility var isVisible by remember { mutableStateOf(true) } AnimatedVisibility( visible = isVisible, ) { ... }
36. Animated Visibility - MORE!
37. Animated Visibility - MORE! - FUN! @Composable fun AnimatedVisibility( visible: Boolean, modifier: Modifier = Modifier, enter: EnterTransition = fadeIn() + expandVertically(), exit: ExitTransition = fadeOut() + shrinkVertically(), label: String = "AnimatedVisibility", content: @Composable AnimatedVisibilityScope.() -> Unit ) { val transition = updateTransition(visible, label) AnimatedEnterExitImpl(transition, { it }, ... ) }
38. Animated Visibility - MORE! @Composable fun AnimatedVisibility( visible: Boolean, modifier: Modifier = Modifier, enter: EnterTransition = fadeIn() + expandVertically(), exit: ExitTransition = fadeOut() + shrinkVertically(), label: String = "AnimatedVisibility", content: @Composable AnimatedVisibilityScope.() -> Unit ) { val transition = updateTransition(visible, label) AnimatedEnterExitImpl(transition, { it }, ... ) }
39. Transitions
40. Transitions Define how a state change is animated Contain: • The current state • The target state • The animation(s) to play
41. Transitions - Enter & Exit Define how a composable will appear or disappear in the screen
42. Transitions - Enter & Exit: Out of the box!
43. Transitions - Enter & Exit var isVisible by remember { mutableStateOf(true) } AnimatedVisibility( visible = isVisible, ) { ... }
44. Transitions - Enter & Exit var isVisible by remember { mutableStateOf(true) } AnimatedVisibility( visible = isVisible, enter = slideInHorizontally(), exit = slideOutHorizontally(), ) { ... }
45. Transitions - Enter & Exit var isVisible by remember { mutableStateOf(true) } AnimatedVisibility( visible = isVisible, enter = scaleIn(), exit = scaleOut(), ) { ... }
46. Transitions - Enter & Exit var isVisible by remember { mutableStateOf(true) } AnimatedVisibility( visible = isVisible, enter = scaleIn() + slideInHorizontally(), exit = scaleOut() + slideOutHorizontally(), ) { ... }
47. Transitions - MORE!
48. Transitions - MORE! @Composable fun AnimatedVisibility( visible: Boolean, modifier: Modifier = Modifier, enter: EnterTransition = fadeIn() + expandVertically(), exit: ExitTransition = fadeOut() + shrinkVertically(), label: String = "AnimatedVisibility", content: @Composable AnimatedVisibilityScope.() -> Unit ) { val transition = updateTransition(visible, label) AnimatedEnterExitImpl(transition, { it }, ... ) }
49. Transitions - MORE! @Composable fun AnimatedVisibility( visible: Boolean, modifier: Modifier = Modifier, enter: EnterTransition = fadeIn() + expandVertically(), exit: ExitTransition = fadeOut() + shrinkVertically(), label: String = "AnimatedVisibility", content: @Composable AnimatedVisibilityScope.() -> Unit ) { val transition = updateTransition(visible, label) AnimatedEnterExitImpl(transition, { it }, ... ) }
50. Transitions - MORE! AnimatedVisibility(...) { ... }
51. Transitions - MORE! AnimatedVisibility(...) { transition }
52. Transitions - MORE! AnimatedVisibility(...) { val value by transition.animate...(){ tState -> }
53. Transitions - MORE! AnimatedVisibility(...) { val color by transition.animateColor(){ tState -> }
54. Transitions - MORE! AnimatedVisibility(...) { val color by transition.animateColor() { tState -> if (tState == EnterExitState.Visible) { TileColor.Green } else { TileColor.Red } } }
55. Transitions - MORE! AnimatedVisibility(...) { val color by transition.animateColor() { tState -> if (tState == EnterExitState.Visible) { TileColor.Green } else { TileColor.Red } } ColorScreen(color = color) { Text(text = "I'm visible! :D") } }
56. Transitions - MORE! AnimatedVisibility(...) { val color by transition.animateColor() { ... } val progress by transition.animateFloat(){ tState -> if (tState == EnterExitState.Visible) 1f else 0f } ColorScreen(color = color) { Text(text = if (progress == 1f) "I'm visible! :D" else "D:" ) } }
57. Transitions - MORE! AnimatedVisibility(...) { val color by transition.animateColor() { ... } val progress by transition.animateFloat(){...} val roundCorners by transition.animateDp { state -> if (state == EnterExitState.Visible) 0.dp else 500.dp } ColorScreen(Modifier.clip(RoundedCornerShape(...))) { Text(text = if (progress == 1f) "I'm visible! :D" else "D:" ) } }
58. Curtain is up (and away and to the side)!
59. Conductor Crossfade
60. Crossfade
61. Crossfade state = screenOne state = screenTwo
62. Crossfade @Composable fun <T> Crossfade( targetState: T, modifier: Modifier = Modifier, animationSpec: FiniteAnimationSpec<Float> = tween(), content: @Composable (T) -> Unit ) { val transition = updateTransition(targetState) transition.Crossfade(modifier, animationSpec, content = content) }
63. Crossfade @Composable fun <T> Crossfade( targetState: T, modifier: Modifier = Modifier, animationSpec: FiniteAnimationSpec<Float> = tween(), content: @Composable (T) -> Unit ) { val transition = updateTransition(targetState) transition.Crossfade(modifier, animationSpec, content = content) }
64. Crossfade @Composable fun <T> Crossfade( targetState: T, modifier: Modifier = Modifier, animationSpec: FiniteAnimationSpec<Float> = tween(), content: @Composable (T) -> Unit ) { val transition = updateTransition(targetState) transition.Crossfade(modifier, animationSpec, content = content) }
65. Crossfade
66. Crossfade enum class Screen { ScreenOne, ScreenTwo, } var screen by remember { mutableStateOf(ScreenOne) }
67. Crossfade var screen by remember { mutableStateOf(ScreenOne) }
68. Crossfade var screen by remember { mutableStateOf(ScreenOne) } Crossfade( targetState = screen, ) { ... }
69. Crossfade var screen by remember { mutableStateOf(ScreenOne) } Crossfade( targetState = screen, ) { state -> when (state) { ScreenOne -> ScreenOne() ScreenTwo -> ScreenTwo() } }
70. Crossfade var screen by remember { mutableStateOf(ScreenOne) } Crossfade( targetState = screen, ) { state -> when (state) { ScreenOne -> ScreenOne() ScreenTwo -> ScreenTwo() } }
71. Transitions - Enter & Exit
72. Transitions - Enter & Exit Stuck with fadeIn & fadeOut • CrossFADE
73. Crossfade @Composable fun <T> Crossfade( targetState: T, modifier: Modifier = Modifier, animationSpec: FiniteAnimationSpec<Float> = tween(), content: @Composable (T) -> Unit ) { val transition = updateTransition(targetState) transition.Crossfade(modifier, animationSpec, content = content) }
74. Crossfade @Composable fun <T> Crossfade( targetState: T, modifier: Modifier = Modifier, animationSpec: FiniteAnimationSpec<Float> = tween(), content: @Composable (T) -> Unit ) { val transition = updateTransition(targetState) transition.Crossfade(modifier, animationSpec, content = content) }
75. Crossfade @Composable fun <T> Crossfade( targetState: T, modifier: Modifier = Modifier, animationSpec: FiniteAnimationSpec<Float> = tween(), content: @Composable (T) -> Unit ) { val transition = updateTransition(targetState) transition.Crossfade(modifier, animationSpec, content = content) }
76. AnimationSpec
77. AnimationSpec Defines how an animation runs.
78. AnimationSpec Defines how an animation runs. 1. Transitions ◦ Define the general path to follow (target state)
79. AnimationSpec Defines how an animation runs. 1. Transitions ◦ Define the general path to follow (target state) ▪ Ej: slide to top left
80. AnimationSpec Defines how an animation runs. 1. Transitions ◦ Define the general path to follow (target state) ▪ Ej: slide to top left 2. AnimationSpec ◦ Define how to follow that path
81. AnimationSpec Defines how an animation runs. 1. Transitions ◦ Define the general path to follow (target state) ▪ Ej: slide to top left 2. AnimationSpec ◦ Define how to follow that path ▪ Ej: Go straight to the point
82. AnimationSpec Defines how an animation runs. 1. Transitions ◦ Define the general path to follow (target state) ▪ Ej: slide to top left 2. AnimationSpec ◦ Define how to follow that path ▪ Ej: Go straight to the point ▪ Ej: First go super fast and then super slow
83. AnimationSpec Defines how an animation runs. 1. Transitions ◦ Define the general path to follow (target state) ▪ Ej: slide to top left 2. AnimationSpec ◦ Define how to follow that path ▪ Ej: Go straight to the point ▪ Ej: First go super fast and then super slow ▪ Ej: Take a detour
84. AnimationSpec - Out of the Box
85. AnimationSpec - Out of the Box tween
86. AnimationSpec - Out of the Box spring tween
87. AnimationSpec - Out of the Box keyframes tween spring
88. AnimationSpec - Out of the Box tween spring keyframes snap
89. Crossfade var screen by remember { mutableStateOf(ScreenOne) } Crossfade( targetState = screen, ) { state -> when (state) { ScreenOne -> ScreenOne() ScreenTwo -> ScreenTwo() } }
90. Crossfade var screen by remember { mutableStateOf(ScreenOne) } Crossfade( targetState = screen, animationSpec = tween(durationMillis = 2000), ) { state -> when (state) { ScreenOne -> ScreenOne() ScreenTwo -> ScreenTwo() } }
91. Crossfade var screen by remember { mutableStateOf(ScreenOne) } Crossfade( targetState = screen, animationSpec = snap(), ) { state -> when (state) { ScreenOne -> ScreenOne() ScreenTwo -> ScreenTwo() } }
92. Crossfade var screen by remember { mutableStateOf(ScreenOne) } Crossfade( targetState = screen, animationSpec = spring(), ) { state -> when (state) { ScreenOne -> ScreenOne() ScreenTwo -> ScreenTwo() } }
93. Conductor ready!
94. The performers! AnimatedContent
95. Animated Content
96. Animated Content state = full state = half state = quarter
97. Animated Content @Composable fun <S> AnimatedContent( targetState: S, modifier: Modifier = Modifier, transitionSpec: AnimatedContentScope<S>.() -> ContentTransform = { fadeIn() + scaleIn() with fadeOut() }, contentAlignment: Alignment = Alignment.TopStart, content: @Composable() AnimatedVisibilityScope.(targetState: S) -> Unit ) { val transition = updateTransition(targetState = targetState) transition.AnimatedContent( ... ) }
98. Animated Content @Composable fun <S> AnimatedContent( targetState: S, modifier: Modifier = Modifier, transitionSpec: AnimatedContentScope<S>.() -> ContentTransform = { fadeIn() + scaleIn() with fadeOut() }, contentAlignment: Alignment = Alignment.TopStart, content: @Composable() AnimatedVisibilityScope.(targetState: S) -> Unit ) { val transition = updateTransition(targetState = targetState) transition.AnimatedContent( ... ) }
99. Animated Content
100. Animated Content var isVisible by remember { mutableStateOf(true) }
101. Animated Content var isVisible by remember { mutableStateOf(true) } AnimatedContent( targetState = isVisible, ) { ... }
102. Animated Content var isVisible by remember { mutableStateOf(true) } AnimatedContent( targetState = isVisible, ) { state -> if (state) { ColorScreen( ... ){ ... } } }
103. Animated Content var isVisible by remember { mutableStateOf(true) } AnimatedContent( targetState = isVisible, ) { state -> if (state) { ColorScreen( ... ){ ... } } }
104. Transitions - Enter & Exit ✅
105. Transitions - Enter & Exit @Composable fun <S> AnimatedContent( targetState: S, modifier: Modifier = Modifier, transitionSpec: AnimatedContentScope<S>.() -> ContentTransform = { fadeIn() + scaleIn() with fadeOut() }, contentAlignment: Alignment = Alignment.TopStart, content: @Composable() AnimatedVisibilityScope.(targetState: S) -> Unit ) { val transition = updateTransition(targetState = targetState) transition.AnimatedContent( ... ) }
106. Transitions - Enter & Exit @Composable fun <S> AnimatedContent( targetState: S, modifier: Modifier = Modifier, transitionSpec: AnimatedContentScope<S>.() -> ContentTransform = { fadeIn() + scaleIn() with fadeOut() }, contentAlignment: Alignment = Alignment.TopStart, content: @Composable() AnimatedVisibilityScope.(targetState: S) -> Unit ) { val transition = updateTransition(targetState = targetState) transition.AnimatedContent( ... ) }
107. Transitions - Enter & Exit @Composable fun <S> AnimatedContent( targetState: S, modifier: Modifier = Modifier, transitionSpec: AnimatedContentScope<S>.() -> ContentTransform = { fadeIn() + scaleIn() with fadeOut() }, contentAlignment: Alignment = Alignment.TopStart, content: @Composable() AnimatedVisibilityScope.(targetState: S) -> Unit ) { val transition = updateTransition(targetState = targetState) transition.AnimatedContent( ... ) }
108. Transitions - Enter & Exit @Composable fun <S> AnimatedContent( targetState: S, modifier: Modifier = Modifier, transitionSpec: AnimatedContentScope<S>.() -> ContentTransform = { enterTransition() with fadeOut() }, contentAlignment: Alignment = Alignment.TopStart, content: @Composable() AnimatedVisibilityScope.(targetState: S) -> Unit ) { val transition = updateTransition(targetState = targetState) transition.AnimatedContent( ... ) }
109. Transitions - Enter & Exit @Composable fun <S> AnimatedContent( targetState: S, modifier: Modifier = Modifier, transitionSpec: AnimatedContentScope<S>.() -> ContentTransform = { enterTransition() with exitTransition() }, contentAlignment: Alignment = Alignment.TopStart, content: @Composable() AnimatedVisibilityScope.(targetState: S) -> Unit ) { val transition = updateTransition(targetState = targetState) transition.AnimatedContent( ... ) }
110. Transitions - Enter & Exit var isVisible by remember { mutableStateOf(true) } AnimatedContent( targetState = isVisible, ) { state -> if (state) { ColorScreen( ... ){ ... } } }
111. Transitions - Enter & Exit var isVisible by remember { mutableStateOf(true) } AnimatedContent( targetState = isVisible, transitionSpec = { fadeIn() + expandVertically() with fadeOut() + shrinkVertically() }, ) { state -> if (state) { ColorScreen( ... ){ ... } } }
112. Performer 1:
113. Performer 1: The Curtain! • State: Visibility Boolean • Fade & expand transitions • It good curtain
114. Performer 2:
115. Performer 2: The Click Counter
116. Performer 2: The Clicker!
117. Performer 2: The Clicker var isVisible by remember { mutableStateOf(true) } AnimatedContent( targetState = isVisible, ) { ... }
118. Performer 2: The Clicker var isVisible by remember { mutableStateOf(true) } AnimatedContent( targetState = isVisible, ) { ... }
119. Performer 2: The Clicker var number by remember { mutableStateOf(0) } AnimatedContent( targetState = number, ) { ... }
120. Performer 2: The Clicker var number by remember { mutableStateOf(0) } AnimatedContent( targetState = number, ) { state -> Text(text = "$state") }
121. Performer 2: The Clicker var number by remember { mutableStateOf(0) } AnimatedContent( targetState = number, ) { state -> Text(text = "$state") }
122. Performer 2: The Clicker var number by remember { mutableStateOf(0) } AnimatedContent( targetState = number, ) { state -> Text(text = "$state").background(...) }
123. Performer 2: The Clicker var number by remember { mutableStateOf(0) } AnimatedContent( targetState = number, transitionSpec = { slideIn { IntOffset(it.width / 2, it.height / 2) } with slideOut { IntOffset(-it.width, -it.height) } }, ) { state -> Text(text = "$state").background(...) }
124. Performer 2: The Clicker var number by remember { mutableStateOf(0) } AnimatedContent( targetState = number, transitionSpec = { slideIn { IntOffset(it.width / 2, it.height / 2) } with slideOut { IntOffset(-it.width, -it.height) } using SizeTransform(clip = false) }, ) { state -> Text(text = "$state").background(...) }
125. Performer 2: The Clicker var number by remember { mutableStateOf(0) } AnimatedContent( targetState = number, transitionSpec = { slideIn { IntOffset(it.width / 2, it.height / 2) } with slideOut { IntOffset(-it.width, -it.height) } using SizeTransform(clip = false) }, ) { state -> Text(text = "$state").background(...) }
126. Performer 2: The Clicker! • State: counter Int • Slide transition • SizeTransform to remove clipping
127. SizeTransform
128. SizeTransform Defines how a size change happens. • Enter & Exit transitions take care of visibility • SizeTransform takes care of size changes
129. SizeTransform fun SizeTransform( clip: Boolean = true, sizeAnimationSpec: (initialSize: IntSize, targetSize: IntSize) -> FiniteAnimationSpec<IntSize> = { _, _ -> spring(visibilityThreshold = IntSize.VisibilityThreshold) } ): SizeTransform = SizeTransformImpl(clip, sizeAnimationSpec)
130. SizeTransform fun SizeTransform( clip: Boolean = true, sizeAnimationSpec: (initialSize: IntSize, targetSize: IntSize) -> FiniteAnimationSpec<IntSize> = { _, _ -> spring(visibilityThreshold = IntSize.VisibilityThreshold) } ): SizeTransform = SizeTransformImpl(clip, sizeAnimationSpec)
131. SizeTransform clip = true clip = false
132. SizeTransform fun SizeTransform( clip: Boolean = true, sizeAnimationSpec: (initialSize: IntSize, targetSize: IntSize) -> FiniteAnimationSpec<IntSize> = { _, _ -> spring(visibilityThreshold = IntSize.VisibilityThreshold) } ): SizeTransform = SizeTransformImpl(clip, sizeAnimationSpec)
133. SizeTransform fun SizeTransform( clip: Boolean = true, sizeAnimationSpec: (initialSize: IntSize, targetSize: IntSize) -> FiniteAnimationSpec<IntSize> = { _, _ -> spring(visibilityThreshold = IntSize.VisibilityThreshold) } ): SizeTransform = SizeTransformImpl(clip, sizeAnimationSpec)
134. AnimationSpec tween spring keyframes snap
135. SizeTransform fun SizeTransform( clip: Boolean = true, sizeAnimationSpec: (initialSize: IntSize, targetSize: IntSize) -> FiniteAnimationSpec<IntSize> = { _, _ -> spring(visibilityThreshold = IntSize.VisibilityThreshold) } ): SizeTransform = SizeTransformImpl(clip, sizeAnimationSpec)
136. Performer 3:
137. Performer 3: The Size Shifter!
138. Performer 3: The Size Shifter
139. Performer 3: The Size Shifter enum class ScreenMode { FullScreen, Quarter, } var screenMode by remember { mutableStateOf(FullScreen) }
140. Performer 3: The Size Shifter var screenMode by remember { mutableStateOf(FullScreen) } AnimatedContent( targetState = screenMode, ) { state -> when (state) { FullScreen -> FullScreen() Quarter -> Quarter() } }
141. Performer 3: The Size Shifter var screenMode by remember { mutableStateOf(FullScreen) } AnimatedContent( targetState = screenMode, ) { state -> when (state) { FullScreen -> FullScreen() Quarter -> Quarter() } }
142. Performer 3: The Size Shifter var screenMode by remember { mutableStateOf(FullScreen) } AnimatedContent( targetState = screenMode, transitionSpec = {...}, ) { state -> when (state) { FullScreen -> FullScreen() Quarter -> Quarter() } }
143. Performer 3: The Size Shifter var screenMode by remember { mutableStateOf(FullScreen) } AnimatedContent( targetState = screenMode, transitionSpec = {...}, ) { state -> when (state) { FullScreen -> FullScreen() Quarter -> Quarter() } }
144. Performer 3: The Size Shifter transitionSpec = {
145. Performer 3: The Size Shifter transitionSpec = { fadeIn(tween(300, 300)) with fadeOut(tween(600))
146. Performer 3: The Size Shifter transitionSpec = { fadeIn(tween(300, 300)) with fadeOut(tween(600)) using SizeTransform { initialSize, targetSize ->
147. Performer 3: The Size Shifter transitionSpec = { fadeIn(tween(300, 300)) with fadeOut(tween(600)) using SizeTransform { initialSize, targetSize -> if (targetState == FullScreen) { keyframes { IntSize(targetSize.width, initialSize.height) at 300 durationMillis = 600 } } else { keyframes { IntSize(initialSize.width, targetSize.height) at 300 durationMillis = 600 } } } },
148. Performer 3: The Size Shifter transitionSpec = { fadeIn(tween(300, 300)) with fadeOut(tween(600)) using SizeTransform { initialSize, targetSize -> if (targetState == FullScreen) { keyframes { IntSize(targetSize.width, initialSize.height) at 300 durationMillis = 600 } } else { keyframes { IntSize(initialSize.width, targetSize.height) at 300 durationMillis = 600 } } } },
149. Performer 3: The Size Shifter transitionSpec = { fadeIn(tween(300, 300)) with fadeOut(tween(600)) using SizeTransform { initialSize, targetSize -> if (targetState == FullScreen) { // growing keyframes { IntSize(targetSize.width, initialSize.height) at 300 durationMillis = 600 } } else { // shrinking keyframes { IntSize(initialSize.width, targetSize.height) at 300 durationMillis = 600 } } } },
150. Performer 3: The Size Shifter transitionSpec = { fadeIn(tween(300, 300)) with fadeOut(tween(600)) using SizeTransform { initialSize, targetSize -> if (targetState == FullScreen) { keyframes { IntSize(targetSize.width, initialSize.height) at 300 durationMillis = 600 } } else { keyframes { IntSize(initialSize.width, targetSize.height) at 300 durationMillis = 600 } } } },
151. Performer 3: The Size Shifter transitionSpec = { fadeIn(tween(300, 300)) with fadeOut(tween(600)) using SizeTransform { initialSize, targetSize -> if (targetState == FullScreen) { keyframes { IntSize(targetSize.width, initialSize.height) at 300 durationMillis = 600 } } else { keyframes { IntSize(initialSize.width, targetSize.height) at 300 durationMillis = 600 } } } },
152. Performer 3: The Size Shifter transitionSpec = { fadeIn(tween(300, 300)) with fadeOut(tween(600)) using SizeTransform { initialSize, targetSize -> if (targetState == FullScreen) { keyframes { IntSize(targetSize.width, initialSize.height) at 300 durationMillis = 600 } } else { keyframes { IntSize(initialSize.width, targetSize.height) at 300 durationMillis = 600 } } } },
153. Performer 3: The Size Shifter transitionSpec = { fadeIn(tween(300, 300)) with fadeOut(tween(600)) using SizeTransform { initialSize, targetSize -> if (targetState == FullScreen) { keyframes { IntSize(targetSize.width, initialSize.height) at 300 durationMillis = 600 } } else { keyframes { IntSize(initialSize.width, targetSize.height) at 300 durationMillis = 600 } } } },
154. Performer 3: The Size Shifter transitionSpec = { fadeIn(tween(300, 300)) with fadeOut(tween(600)) using SizeTransform { initialSize, targetSize -> if (targetState == FullScreen) { keyframes { IntSize(targetSize.width, initialSize.height) at 300 durationMillis = 600 } } else { keyframes { IntSize(initialSize.width, targetSize.height) at 300 durationMillis = 600 } } } },
155. Performer 3: The Size Shifter var screenMode by remember { mutableStateOf(FullScreen) } AnimatedContent( targetState = screenMode, transitionSpec = {...}, ) { state -> when (state) { FullScreen -> FullScreen() Quarter -> Quarter() } }
156. Performer 3: The Size Shifter enum class ScreenMode { FullScreen, Quarter, HalfVertical, HalfHorizontal, } var screenMode by remember { mutableStateOf(FullScreen) } AnimatedContent( targetState = screenMode, transitionSpec = {...}, ) { state -> when (state) { FullScreen -> FullScreen() Quarter -> Quarter() } }
157. Performer 3: The Size Shifter! • State: enum class • fade transition • Custom SizeTransform
158. The Performers! The Curtain! The Clicker! Size Shifter!
159. More performers! The Tweens! Bubbles! Happy Bars!
160. Thank you!
161. Wanna learn more? • Play with the repo: https://github.com/nicole-terc/animationsShow • Animations in Compose: https://developer.android.com/jetpack/compose/animation • Animations API in Jetpack Compose Video: https://youtu.be/Z_T1bVjhMLk
162. Thank you, and don’t forget to vote @nicole_terc KotlinConf’23 Amsterdam