Dissecting Compose Animation

Animation plays a crucial role in App UI/UX. If not done correctly it can bite back leading to a bad app experience. A key to good animation is knowing API well and when to use which one.

While it is crucial to know animation APIs on the consumer side it is essential to know the internals of Compose animation to be able to debug or optimize something which requires internal knowledge.

This talk aims to throw some light on the internals of the following APIs


- Low-level animation API - Animation & AnimationSpecs

- Animatable API

- animation*AsState API

- Transition API


At the end, we will learn the internals of Compose Animation which will prepare you to optimize your App UI/UX experience!

Transcript

1. Dissecting Compose Animation A deep dive into Compose Animation API androiddev.social/@sagar Android at linkedin.com/in/sagarviradiya/ @viradiya_sagar
2. 2 Our house of brands
3. 3 Agenda Animation - Low level API Compose Animation in Nutshell Animatable animate*AsState Transition 1 2 3 4 5
4. 4 Why?
5. 5 Importance of knowing API internals 1. Essentials to implement efficient animation 2. Choosing right API for a problem 3. Debugging performance or behaviour 4. Can write custom high level API as a thin wrapper over low level API 5. Depth of knowledge
6. 6 Compose Animation in a nutshell
7. 7 Compose animation in a nutshell 0 0.06 1 0.12 0.18 0.25 0.29 0.35 0.45 0.5 0.57 0.6 0.65 0.7 0.95 0.85 0.75 500 ms State<T>
8. 8 Compose animation in a nutshell 0 1 500 ms Frequency of state change?
9. 9 60 hz
10. 10 ~16.67 ms
11. 11 30 for 500 ms animation
12. 12 90 hz
13. 13 ~11.11 ms
14. 14 46 for 500 ms animation
15. 15 30 for 500 ms animation 60 hz 46 120 hz 90 hz 61
16. 16 Compose Animation API Hierarchy
17. 17 Compose Animation API Hierarchy Animation Animatable Transition animate*AsState
18. 18 Animation
19. 19 Animation • Core engine of Compose animation • Stateless • Independent of compose
20. 20 Animation f(time) Play time Value
21. 21 Animation 0 1 500 ms f(250 ms) 0.25
22. 22 Animation 0 1 500 ms f(375 ms) 0.75
23. 23 Animation interface Animation<T, V : AnimationVector> { . . . //Returns the value of the animation at the given play time fun getValueFromNanos(playTimeNanos: Long): T . . . }
24. 24 Animation interface Animation<T, V : AnimationVector> { . . . //Returns the value of the animation at the given play time fun getValueFromNanos(playTimeNanos: Long): T . . . }
25. 25 Animation Implementation TargetBasedAnimation DecayAnimation
26. 26 Animation TargetBasedAnimation Play time Value AnimationSpec f(time)
27. 27 Animation f( f(time) ) Play time Value
28. 28 AnimationSpec interface VectorizedAnimationSpec<V : AnimationVector> { . . /** * Calculates the value of the animation at given playtime, with * the provided start/end values, and start velocity. */ fun getValueFromNanos( playTimeNanos: Long, initialValue: V, targetValue: V, initialVelocity: V ): V . . . }
29. 29 Built-in Animation Spec • SpringSpec • TweenSpec • RepeatableSpec • InfiniteRepeatableSpec Many more…
30. 30 Animatable
31. 31 Animatable • Stateful • Coroutine based • Synchronised with Android’s choreographer to listen for frames • Wrapper over animation
32. 32 Animatable State<T> TargetBasedAnimation FrameListener
33. 33 Animatable State<T> Animation FrameListener Listen for frames Time in nano Playtime in nano Value
34. 34 Animatable Example // Compose scope val isVisible by remember { mutableStateOf(false) }
35. 35 Animatable Example // Compose scope val isVisible by remember { mutableStateOf(false) } val alphaAnimatable = remember { Animatable(0f) }
36. 36 Animatable Example // Compose scope val isVisible by remember { mutableStateOf(false) } val alphaAnimatable = remember { Animatable(0f) } LaunchedEffect(isVisible) { // Coroutine Scope alphaAnimatable.animateTo(if (isVisible) 1f else 0f) }
37. 37 Animatable Example // Compose scope val isVisible by remember { mutableStateOf(false) } val alphaAnimatable = remember { Animatable(0f) } LaunchedEffect(isVisible) { // Coroutine Scope alphaAnimatable.animateTo(if (isVisible) 1f else 0f) } Image( modifier = Modifier.graphicsLayer { alpha = alphaAnimatable.value }, painter = painterResource(id = R.drawable.image), contentDescription = "Image" )
38. 38 Animatable Example // Compose scope val isVisible by remember { mutableStateOf(false) } val alphaAnimatable = remember { Animatable(0f) } LaunchedEffect(isVisible) { // Coroutine Scope alphaAnimatable.animateTo(if (isVisible) 1f else 0f) } Image( modifier = Modifier.graphicsLayer { alpha = alphaAnimatable.value }, painter = painterResource(id = R.drawable.image), contentDescription = "Image" )
39. 39 animateTo 🧐 suspend fun animateTo( targetValue: T, animationSpec: AnimationSpec<T> = defaultSpringSpec, initialVelocity: T = velocity, block: (Animatable<T, V>.() -> Unit)? = null ): AnimationResult<T, V> { val anim = TargetBasedAnimation( animationSpec = animationSpec, initialValue = value, targetValue = targetValue, typeConverter = typeConverter, initialVelocity = initialVelocity ) return runAnimation(anim, initialVelocity, block) }
40. 40 animateTo 🧐 suspend fun animateTo( targetValue: T, animationSpec: AnimationSpec<T> = defaultSpringSpec, initialVelocity: T = velocity, block: (Animatable<T, V>.() -> Unit)? = null ): AnimationResult<T, V> { val anim = TargetBasedAnimation( animationSpec = animationSpec, initialValue = value, targetValue = targetValue, typeConverter = typeConverter, initialVelocity = initialVelocity ) return runAnimation(anim, initialVelocity, block) }
41. 41 animateTo 🧐 suspend fun animateTo( targetValue: T, animationSpec: AnimationSpec<T> = defaultSpringSpec, initialVelocity: T = velocity, block: (Animatable<T, V>.() -> Unit)? = null ): AnimationResult<T, V> { val anim = TargetBasedAnimation( animationSpec = animationSpec, initialValue = value, targetValue = targetValue, typeConverter = typeConverter, initialVelocity = initialVelocity ) return runAnimation(anim, initialVelocity, block) }
42. 42 runAnimation 🧐 . . . while (lateInitScope!!.isRunning) { val durationScale = coroutineContext.durationScale animation.callWithFrameNanos { frameTimeInNano -> lateInitScope!!.doAnimationFrameWithScale( frameTimeInNano, durationScale, animation, this, block ) } } . . .
43. 43 runAnimation 🧐 . . . while (lateInitScope!!.isRunning) { val durationScale = coroutineContext.durationScale animation.callWithFrameNanos { frameTimeInNano -> lateInitScope!!.doAnimationFrameWithScale( frameTimeInNano, durationScale, animation, this, block ) } } . . .
44. 44 runAnimation 🧐 . . . while (lateInitScope!!.isRunning) { val durationScale = coroutineContext.durationScale animation.callWithFrameNanos { frameTimeInNano -> lateInitScope!!.doAnimationFrameWithScale( frameTimeInNano, durationScale, animation, this, block ) } } . . .
45. 45 runAnimation 🧐 . . . while (lateInitScope!!.isRunning) { val durationScale = coroutineContext.durationScale animation.callWithFrameNanos { frameTimeInNano -> lateInitScope!!.doAnimationFrameWithScale( frameTimeInNano, durationScale, animation, this, block ) } } . . .
46. 46 callWithFrameNanos 🧐 private suspend fun callWithFrameNanos( onFrame: (frameTimeNanos: Long) -> R ): R { return if (isInfinite) { withInfiniteAnimationFrameNanos(onFrame) } else { withFrameNanos { frameTimeNano -> onFrame.invoke(frameTimeNano / AnimationDebugDurationScale) } } }
47. 47 callWithFrameNanos 🧐 private suspend fun callWithFrameNanos( onFrame: (frameTimeNanos: Long) -> R ): R { return if (isInfinite) { withInfiniteAnimationFrameNanos(onFrame) } else { withFrameNanos { frameTimeNano -> onFrame.invoke(frameTimeNano / AnimationDebugDurationScale) } } }
48. 48 callWithFrameNanos 🧐 private suspend fun callWithFrameNanos( onFrame: (frameTimeNanos: Long) -> R ): R { return if (isInfinite) { withInfiniteAnimationFrameNanos(onFrame) } else { withFrameNanos { frameTimeNano -> onFrame.invoke(frameTimeNano / AnimationDebugDurationScale) } } }
49. 49 withFrameNanos 🧐 suspend fun <R> withFrameNanos(onFrame: (frameTimeNanos: Long) -> R): R { return coroutineContext.monotonicFrameClock.withFrameNanos(onFrame) }
50. 50 withFrameNanos 🧐 suspend fun <R> withFrameNanos(onFrame: (frameTimeNanos: Long) -> R): R { return coroutineContext.monotonicFrameClock.withFrameNanos(onFrame) }
51. 51 MonotonicFrameClock 🧐 interface MonotonicFrameClock : CoroutineContext.Element { /** * Suspends until a new frame is requested, immediately invokes [onFrame] * with the frame time in nanoseconds in the calling context of frame * dispatch, then resumes with the result from [onFrame]. */ suspend fun <R> withFrameNanos(onFrame: (frameTimeNanos: Long) -> R): R . . . }
52. 52 MonotonicFrameClock 🧐 interface MonotonicFrameClock : CoroutineContext.Element { /** * Suspends until a new frame is requested, immediately invokes [onFrame] * with the frame time in nanoseconds in the calling context of frame * dispatch, then resumes with the result from [onFrame]. */ suspend fun <R> withFrameNanos(onFrame: (frameTimeNanos: Long) -> R): R . . . }
53. 53 MonotonicFrameClock 🧐 class AndroidUiFrameClock internal constructor( val choreographer: Choreographer, private val dispatcher: AndroidUiDispatcher? ) : androidx.compose.runtime.MonotonicFrameClock { override suspend fun <R> withFrameNanos( onFrame: (Long) -> R ): R { . . return suspendCancellableCoroutine { co -> val callback = Choreographer.FrameCallback { frameTimeNanos -> co.resumeWith(runCatching { onFrame(frameTimeNanos) }) } . . } }
54. 54 MonotonicFrameClock 🧐 class AndroidUiFrameClock internal constructor( val choreographer: Choreographer, private val dispatcher: AndroidUiDispatcher? ) : androidx.compose.runtime.MonotonicFrameClock { override suspend fun <R> withFrameNanos( onFrame: (Long) -> R ): R { . . return suspendCancellableCoroutine { co -> val callback = Choreographer.FrameCallback { frameTimeNanos -> co.resumeWith(runCatching { onFrame(frameTimeNanos) }) } . . } }
55. 55 MonotonicFrameClock 🧐 class AndroidUiFrameClock internal constructor( val choreographer: Choreographer, private val dispatcher: AndroidUiDispatcher? ) : androidx.compose.runtime.MonotonicFrameClock { override suspend fun <R> withFrameNanos( onFrame: (Long) -> R ): R { . . return suspendCancellableCoroutine { co -> val callback = Choreographer.FrameCallback { frameTimeNanos -> co.resumeWith(runCatching { onFrame(frameTimeNanos) }) } . . } }
56. 56 MonotonicFrameClock 🧐 class AndroidUiFrameClock internal constructor( val choreographer: Choreographer, private val dispatcher: AndroidUiDispatcher? ) : androidx.compose.runtime.MonotonicFrameClock { override suspend fun <R> withFrameNanos( onFrame: (Long) -> R ): R { . . return suspendCancellableCoroutine { co -> val callback = Choreographer.FrameCallback { frameTimeNanos -> co.resumeWith(runCatching { onFrame(frameTimeNanos) }) } . . } }
57. 57 runAnimation 🧐 . . . while (lateInitScope!!.isRunning) { val durationScale = coroutineContext.durationScale animation.callWithFrameNanos { frameTimeInNano -> lateInitScope!!.doAnimationFrameWithScale( frameTimeInNano, durationScale, animation, this, block ) } } . . .
58. 58 doAnimationFrameWithScale 🧐 private fun doAnimationFrameWithScale( frameTimeNanos: Long, durationScale: Float, anim: Animation<T, V>, state: AnimationState<T, V>, block: AnimationScope<T, V>.() -> Unit ) { val playTimeNanos = if (durationScale == 0f) { anim.durationNanos } else { ((frameTimeNanos - startTimeNanos) / durationScale).toLong() } doAnimationFrame(frameTimeNanos, playTimeNanos, anim, state, block) }
59. 59 doAnimationFrameWithScale 🧐 private fun doAnimationFrameWithScale( frameTimeNanos: Long, durationScale: Float, anim: Animation<T, V>, state: AnimationState<T, V>, block: AnimationScope<T, V>.() -> Unit ) { val playTimeNanos = if (durationScale == 0f) { anim.durationNanos } else { ((frameTimeNanos - startTimeNanos) / durationScale).toLong() } doAnimationFrame(frameTimeNanos, playTimeNanos, anim, state, block) }
60. 60 doAnimationFrameWithScale 🧐 private fun doAnimationFrameWithScale( frameTimeNanos: Long, durationScale: Float, anim: Animation<T, V>, state: AnimationState<T, V>, block: AnimationScope<T, V>.() -> Unit ) { val playTimeNanos = if (durationScale == 0f) { anim.durationNanos } else { ((frameTimeNanos - startTimeNanos) / durationScale).toLong() } doAnimationFrame(frameTimeNanos, playTimeNanos, anim, state, block) }
61. 61 doAnimationFrame 🧐 private fun doAnimationFrame( frameTimeNanos: Long, playTimeNanos: Long, anim: Animation<T, V>, state: AnimationState<T, V>, block: AnimationScope<T, V>.() -> Unit ) { lastFrameTimeNanos = frameTimeNanos value = anim.getValueFromNanos(playTimeNanos) velocityVector = anim.getVelocityVectorFromNanos(playTimeNanos) val isLastFrame = anim.isFinishedFromNanos(playTimeNanos) if (isLastFrame) { finishedTimeNanos = lastFrameTimeNanos isRunning = false } updateState(state) }
62. 62 doAnimationFrame 🧐 private fun doAnimationFrame( frameTimeNanos: Long, playTimeNanos: Long, anim: Animation<T, V>, state: AnimationState<T, V>, block: AnimationScope<T, V>.() -> Unit ) { lastFrameTimeNanos = frameTimeNanos value = anim.getValueFromNanos(playTimeNanos) velocityVector = anim.getVelocityVectorFromNanos(playTimeNanos) val isLastFrame = anim.isFinishedFromNanos(playTimeNanos) if (isLastFrame) { finishedTimeNanos = lastFrameTimeNanos isRunning = false } updateState(state) }
63. 63 doAnimationFrame 🧐 private fun doAnimationFrame( frameTimeNanos: Long, playTimeNanos: Long, anim: Animation<T, V>, state: AnimationState<T, V>, block: AnimationScope<T, V>.() -> Unit ) { lastFrameTimeNanos = frameTimeNanos value = anim.getValueFromNanos(playTimeNanos) velocityVector = anim.getVelocityVectorFromNanos(playTimeNanos) val isLastFrame = anim.isFinishedFromNanos(playTimeNanos) if (isLastFrame) { finishedTimeNanos = lastFrameTimeNanos isRunning = false } updateState(state) }
64. 64 doAnimationFrame 🧐 private fun doAnimationFrame( frameTimeNanos: Long, playTimeNanos: Long, anim: Animation<T, V>, state: AnimationState<T, V>, block: AnimationScope<T, V>.() -> Unit ) { lastFrameTimeNanos = frameTimeNanos value = anim.getValueFromNanos(playTimeNanos) velocityVector = anim.getVelocityVectorFromNanos(playTimeNanos) val isLastFrame = anim.isFinishedFromNanos(playTimeNanos) if (isLastFrame) { finishedTimeNanos = lastFrameTimeNanos isRunning = false } updateState(state) }
65. 65 animate*As State
66. 66 animate*AsState • Triggers an animation on a state change • Composable wrapping animatable • Expose animatable state
67. 67 animate*AsState Animatable animateTo(target) State<T>
68. 68 animate*AsState Example // Compose Context val isVisible by remember { mutableStateOf(false) }
69. 69 animate*AsState Example // Compose Context val isVisible by remember { mutableStateOf(false) } val alphaState: State<Float> = animateFloatAsState( targetValue = if (isVisible) 1f else 0f, label = "alphaAnimation" )
70. 70 animate*AsState Example // Compose Context val isVisible by remember { mutableStateOf(false) } val alphaState: State<Float> = animateFloatAsState( targetValue = if (isVisible) 1f else 0f, label = "alphaAnimation" ) Image( modifier = Modifier.graphicsLayer { alpha = alphaState.value }, painter = painterResource(id = R.drawable.image), contentDescription = "Image" )
71. 71 Transition
72. 72 Transition • Trigger multiple animations on a state change • Composable wrapping a low level animation for each child animation • Stateful with a state for each animation • Synchronised with Android’s choreographer to listen for frames
73. 73 // Compose Context var isVisible by remember { mutableStateOf(false) }
74. 74 // Compose Context var isVisible by remember { mutableStateOf(false) } Transition val transition = updateTransition( target = isVisible, label = "box state" )
75. 75 // Compose Context var isVisible by remember { mutableStateOf(false) } Transition val transition = updateTransition( target = isVisible, label = "box state" ) val alpha by transition.animateFloat( label = "alpha" ) { isVisible -> if (isVisible) 1f else 0f } State Target : 0
76. 76 // Compose Context var isVisible by remember { mutableStateOf(false) } Transition val transition = updateTransition( target = isVisible, label = "box state" ) val alpha by transition.animateFloat( label = "alpha" ) { isVisible -> if (isVisible) 1f else 0f } val scale by transition.animateFloat( label = "Scale" ) { isVisible -> if (isVisible) 1f else 0f } State Target : 0 State Target : 0
77. 77 // Compose Context var isVisible by remember { mutableStateOf(false) } Transition val transition = updateTransition( target = isVisible, label = "box state" ) val alpha by transition.animateFloat( label = "alpha" ) { isVisible -> if (isVisible) 1f else 0f } val scale by transition.animateFloat( label = "Scale" ) { isVisible -> if (isVisible) 1f else 0f } State Target : 0 State Target : 0
78. 78 // Compose Context var isVisible by remember { mutableStateOf(false) } Transition val transition = updateTransition( target = isVisible, label = "box state" ) val alpha by transition.animateFloat( label = "alpha" ) { isVisible -> if (isVisible) 1f else 0f } val scale by transition.animateFloat( label = "Scale" ) { isVisible -> if (isVisible) 1f else 0f } State Target : 0 State Target : 0
79. 79 // Compose Context var isVisible by remember { mutableStateOf(false) } Transition val transition = updateTransition( target = isVisible, label = "box state" ) State val scale by transition.animateFloat( label = "Scale" ) { isVisible -> if (isVisible) 1f else 0f } State val alpha by transition.animateFloat( label = "alpha" ) { isVisible -> if (isVisible) 1f else 0f } State Target : 1 State Target : 0
80. 80 // Compose Context var isVisible by remember { mutableStateOf(false) } Transition val transition = updateTransition( target = isVisible, label = "box state" ) State State State Target : 1 State Target : 1 val alpha by transition.animateFloat( label = "alpha" ) { isVisible -> if (isVisible) 1f else 0f } val scale by transition.animateFloat( label = "Scale" ) { isVisible -> if (isVisible) 1f else 0f }
81. 81 // Compose Context var isVisible by remember { mutableStateOf(false) } Transition val transition = updateTransition( target = isVisible, label = "box state" ) State State State Target : 1 State Target : 1 val alpha by transition.animateFloat( label = "alpha" ) { isVisible -> if (isVisible) 1f else 0f } val scale by transition.animateFloat( label = "Scale" ) { isVisible -> if (isVisible) 1f else 0f } Listen for frames Time in nano
82. 82 // Compose Context var isVisible by remember { mutableStateOf(false) } Transition val transition = updateTransition( target = isVisible, label = "box state" ) State State State Target : 1 State Target : 1 val alpha by transition.animateFloat( label = "alpha" ) { isVisible -> if (isVisible) 1f else 0f } val scale by transition.animateFloat( label = "Scale" ) { isVisible -> if (isVisible) 1f else 0f } Listen for frames Time in nano
83. 83 // Compose Context var isVisible by remember { mutableStateOf(false) } Transition val transition = updateTransition( target = isVisible, label = "box state" ) State State State Target : 1 Value : anim(time) State Target : 1 Value : anim(time) val alpha by transition.animateFloat( label = "alpha" ) { isVisible -> if (isVisible) 1f else 0f } val scale by transition.animateFloat( label = "Scale" ) { isVisible -> if (isVisible) 1f else 0f } Listen for frames Time in nano
84. 84 Summary Animatable Animation == fun(fun(time)) animate*AsState Transition 1 2 3 4 Stateful wrapper over Animation Composable wrapping Animatable Composable wrapping Animations
85. 85 Questions?