Jetpack Compose animations playground | DevFest Ireland 2023 🇮🇪

Animations make our apps nicer! Let's see how easy it is to use them. In this talk, you will have an overview of how to orchestrate multiple animation states, different ways of triggering them, and measure your app performance.

Transcript

1. Jetpack Compose animations playground Daniele Favaro Android Dev @ GDG Android Stockholm December 2023 DevFest Ireland 2023
2. Jetpack Compose quick overview
4. Composition lifecycle enter the composition exit the composition @Composable input data output UI
5. Composition lifecycle enter the composition exit the composition @Composable recomposition 0:N times input data output UI
6. composition layout draw
7. composition layout draw .myPage .myImage .myText
8. composition layout draw .myPage .myImage .myText .myPage .myText .myImage
9. composition layout draw .myPage .myImage .myText .myPage .myText .myImage Sample text
10. composition layout draw
11. () -> Unit
12. () -> Unit Modifier .graphicsLayer { ... } .constrainAs { ... } .drawBehind { ... } .cool stuff ...
13. Modifier.graphicsLayer( rotationZ = animatedDegree ) () -> Unit Modifier.graphicsLayer { rotationZ = animatedDegree }
14. () -> Unit Modifier.graphicsLayer { rotationZ = animatedDegree } Modifier.graphicsLayer( rotationZ = animatedDegree )
15. () -> Unit @Composable fun SampleWheel( animatedDegree: Float ) { Box( Modifier.graphicsLayer { rotationZ = animatedDegree } ) } Modifier.graphicsLayer { rotationZ = animatedDegree }
16. () -> Unit @Composable fun SampleWheel( animatedDegree: () -> Float ) { Box( Modifier.graphicsLayer { rotationZ = animatedDegree } ) } Modifier.graphicsLayer { rotationZ = animatedDegree() }
17. () -> Unit
18. Today’s desired outcome
21. animateInt AnimatedVisibility animateDp animateColor
22. Choose your Animation developer.android.com/jetpack/compose/ animation/resources
32. developer.android.com/jetpack/compose/ animation/resources
35. @Composable fun RatingCompose @Composable internal fun RatingHeaderCompose @Composable internal fun RatingBarCompose
36. @Composable internal fun RatingHeaderCompose
37. @Composable internal fun RatingHeaderCompose( animationModel: AnimationModel, sectorList: List<SectorModel>, scoreMin: Int, scoreMax: Int, transition: Transition<RatingTransitionState> ) { val context = LocalContext.current val scoreLabel: String by remember { derivedStateOf { var label: String = context.getString(R.string.rating_not_applicable) // check if our target is in any of the input sectors ... label } } val animatedScore: Int by transition.animateInt( label = "", transitionSpec = { tween( durationMillis = animationModel.animDuration, delayMillis = animationModel.animDelay, easing = FastOutSlowInEasing )
38. transition: Transition<RatingTransitionState> ) { val context = LocalContext.current val scoreLabel: String by remember { derivedStateOf { var label: String = context.getString(R.string.rating_not_applicable) // check if our target is in any of the input sectors ... label } } val animatedScore: Int by transition.animateInt( label = "", transitionSpec = { tween( durationMillis = animationModel.animDuration, delayMillis = animationModel.animDelay, easing = FastOutSlowInEasing ) } ) { state -> when (state) { RatingTransitionState.Initial -> 0 RatingTransitionState.Rated -> animationModel.targetValue.toInt() } }
39. transitionSpec = { tween( durationMillis = animationModel.animDuration, delayMillis = animationModel.animDelay, easing = FastOutSlowInEasing ) } ) { state -> when (state) { RatingTransitionState.Initial -> 0 RatingTransitionState.Rated -> animationModel.targetValue.toInt() } } Row( modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceBetween, verticalAlignment = Alignment.Bottom ) { Text(text = "$animatedScore") AnimatedVisibility( visible = transition.currentState == transition.targetState, // signal for animation end enter = slideInVertically { height -> -height } + fadeIn() ) { Text(text = scoreLabel) } } }
40. transitionSpec = { tween( durationMillis = animationModel.animDuration, delayMillis = animationModel.animDelay, easing = FastOutSlowInEasing ) } ) { state -> when (state) { RatingTransitionState.Initial -> 0 RatingTransitionState.Rated -> animationModel.targetValue.toInt() } } Row( modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceBetween, verticalAlignment = Alignment.Bottom ) { Text(text = "$animatedScore") AnimatedVisibility( visible = transition.currentState == transition.targetState, // signal for animation end enter = slideInVertically { height -> -height } + fadeIn() ) { Text(text = scoreLabel) } } }
42. @Composable internal fun RatingHeaderCompose
43. @Composable fun RatingCompose @Composable internal fun RatingHeaderCompose @Composable internal fun RatingBarCompose
44. @Composable internal fun RatingBarCompose
45. @Composable internal fun RatingBarCompose ... ConstraintLayout(modifier = Modifier.fillMaxWidth()) { val (ratingBar, index) = createRefs() Row( modifier = Modifier.fillMaxWidth().height(ratingBarHeight) .constrainAs(ratingBar) { top.linkTo(index.top) bottom.linkTo(index.bottom) } ) { scoreRanges.forEach { range -> Spacer(…) } } } Row(modifier = Modifier.fillMaxWidth().padding(top = defaultMarginS)) { scoreRanges.forEachIndexed { index, range -> Row( modifier = Modifier.weight(...), horizontalArrangement = if (index == 0) Arrangement.SpaceBetween else Arrangement.End ) {
46. } Row(modifier = Modifier.fillMaxWidth().padding(top = defaultMarginS)) { scoreRanges.forEachIndexed { index, range -> Row( modifier = Modifier.weight(...), horizontalArrangement = if (index == 0) Arrangement.SpaceBetween else Arrangement.End ) { if (index == 0) { Text( text = scoreMinLabel, color = MaterialTheme.colorScheme.onBackground ) } if (index == scoreRanges.lastIndex) { Text( text = scoreMaxLabel, color = MaterialTheme.colorScheme.onBackground ) } else { Text( text = range.end.toString(), color = MaterialTheme.colorScheme.onBackground ) } } } }
47. } Row(modifier = Modifier.fillMaxWidth().padding(top = defaultMarginS)) { scoreRanges.forEachIndexed { index, range -> Row( modifier = Modifier.weight(...), horizontalArrangement = if (index == 0) Arrangement.SpaceBetween else Arrangement.End ) { if (index == 0) { Text( text = scoreMinLabel, color = MaterialTheme.colorScheme.onBackground ) } if (index == scoreRanges.lastIndex) { Text( text = scoreMaxLabel, color = MaterialTheme.colorScheme.onBackground ) } else { Text( text = range.end.toString(), color = MaterialTheme.colorScheme.onBackground ) } } } } } Row(modifier = Modifier.fillMaxWidth().padding(top = defaultMarginS)) { scoreRanges.forEachIndexed { index, range -> Row(modifier = Modifier.fillMaxWidth().padding(top = defaultMarginS)) { scoreRanges.forEachIndexed { index, range ->
48. Row(modifier = Modifier.fillMaxWidth().padding(top = defaultMarginS)) { scoreRanges.forEachIndexed { index, range -> // labels } }
49. Row(modifier = Modifier .fillMaxWidth() .padding(top = defaultMarginS) ) { scoreRanges.forEachIndexed { index, range -> // labels } @Composable internal fun RatingBarCompose ... ConstraintLayout(modifier = Modifier.fillMaxWidth()) { val (ratingBar, index) = createRefs() Row( modifier = Modifier.fillMaxWidth().height(ratingBarHeight) .constrainAs(ratingBar) { top.linkTo(index.top) bottom.linkTo(index.bottom) } ) { scoreRanges.forEach { range -> Spacer(…) } } }
50. BulletCompose( modifier = Modifier .size(indicatorRadius * 2) .border(indicatorBorderWidth, RatingBarBorderColor, CircleShape) .constrainAs(index) { top.linkTo(parent.top) translationX = animatedScoreDp }, backgroundColor = animatedBulletColor ) val (ratingBar, index) = createRefs() Row( modifier = Modifier.fillMaxWidth().height(ratingBarHeight) .constrainAs(ratingBar) { top.linkTo(index.top) bottom.linkTo(index.bottom) } ) { scoreRanges.forEach { range -> Spacer(…) } } } Row(modifier = Modifier .fillMaxWidth() .padding(top = defaultMarginS)
51. BulletCompose( modifier = Modifier .size(indicatorRadius * 2) .border(indicatorBorderWidth, RatingBarBorderColor, CircleShape) .constrainAs(index) { top.linkTo(parent.top) translationX = animatedScoreDp }, backgroundColor = animatedBulletColor ) val (ratingBar, index) = createRefs() Row( modifier = Modifier.fillMaxWidth().height(ratingBarHeight) .constrainAs(ratingBar) { top.linkTo(index.top) bottom.linkTo(index.bottom) } ) { scoreRanges.forEach { range -> Spacer(…) } } } Row(modifier = Modifier .fillMaxWidth() .padding(top = defaultMarginS)
52. val animatedScoreDp: Dp by transition.animateDp( label = "", transitionSpec = { tween( durationMillis = animDuration, delayMillis = animDelay, easing = FastOutSlowInEasing ) } ) { state -> when (state) { RatingTransitionState.Initial -> 0 RatingTransitionState.Rated -> scoreTransitionDp } } @Composable internal fun RatingBarCompose ... ConstraintLayout(modifier = Modifier.fil ... BulletCompose( modifier = Modifier .size(indicatorRadius * 2) .border(indicatorBorderWidth, Rati CircleShape) .constrainAs(index) { top.linkTo(parent.top) translationX = animatedScoreDp }, backgroundColor = animatedBulletCol ) }
53. val scoreTransitionDp: Dp by remember { derivedStateOf { ratingBarWidthDpState * getSectorWeight( rangeStart = scoreMin, rangeEnd = scoreState, // rating scoreMax = scoreMax, scoreMin = scoreMin ) } } @Composable internal fun RatingBarCompose ... ConstraintLayout(modifier = Modifier.fil ... BulletCompose( modifier = Modifier .size(indicatorRadius * 2) .border(indicatorBorderWidth, Rati CircleShape) .constrainAs(index) { top.linkTo(parent.top) translationX = animatedScoreDp }, backgroundColor = animatedBulletCol ) } val animatedScoreDp: Dp by transition.animateDp( ... ) { state -> when (state) { RatingTransitionState.Initial -> 0 RatingTransitionState.Rated -> scoreTransitionDp } }
54. @Composable internal fun RatingBarCompose ... ConstraintLayout(modifier = Modifier.fil ... BulletCompose( modifier = Modifier .size(indicatorRadius * 2) .border(indicatorBorderWidth, Rati CircleShape) .constrainAs(index) { top.linkTo(parent.top) translationX = animatedScoreDp }, backgroundColor = animatedBulletCol ) } val scoreTransitionDp: Dp by remember { derivedStateOf { ratingBarWidthDpState * getSectorWeight( rangeStart = scoreMin, rangeEnd = scoreState, // rating scoreMax = scoreMax, scoreMin = scoreMin ) } } val animatedScoreDp: Dp by transition.animateDp( ... ) { state -> when (state) { RatingTransitionState.Initial -> 0 RatingTransitionState.Rated -> scoreTransitionDp } }
55. @Composable internal fun RatingBarCompose ... val scoreTransitionDp: Dp by remember { derivedStateOf { ratingBarWidthDpState * getSectorWeight( rangeStart = scoreMin, rangeEnd = scoreState, // rating scoreMax = scoreMax, scoreMin = scoreMin ) } } val animatedScoreDp: Dp by transition.animateDp( ... ) { state -> when (state) { RatingTransitionState.Initial -> 0 RatingTransitionState.Rated -> scoreTransitionDp } } ) { val (ratingBar, index) = createRefs() Row( modifier = Modifier.fillMaxWidth().height(ratingBarHe .constrainAs(ratingBar) { top.linkTo(index.top) bottom.linkTo(index.bottom) } ) { scoreRanges.forEach { range -> Spacer(…) } } BulletCompose( modifier = Modifier .size(indicatorRadius * 2) .border(indicatorBorderWidth, ConstraintLayout(modifier = Modifier .fillMaxWidth()
56. var ratingBarWidthDpState: Dp by remember mutableStateOf(0.dp) } ) { val (ratingBar, index) = createRefs() Row( modifier = Modifier.fillMaxWidth().height(ratingBarHe .constrainAs(ratingBar) { top.linkTo(index.top) bottom.linkTo(index.bottom) } ) { scoreRanges.forEach { range -> Spacer(…) } } BulletCompose( @Composable internal fun RatingBarCompose ... ConstraintLayout(modifier = Modifier .fillMaxWidth() val scoreTransitionDp: Dp by remember { derivedStateOf { ratingBarWidthDpState * getSectorWeight( rangeStart = scoreMin, rangeEnd = scoreState, // rating scoreMax = scoreMax, scoreMin = scoreMin ) } } val animatedScoreDp: Dp by transition.animateDp( ... ) { state -> when (state) { RatingTransitionState.Initial -> 0 RatingTransitionState.Rated -> scoreTransitionDp } }
57. .onGloballyPositioned { with(localDensity) { ratingBarWidthDpState = it.size.width. onRatingBarDraw.invoke() } } val scoreTransitionDp: Dp by remember { derivedStateOf { ratingBarWidthDpState * getSectorWeight( rangeStart = scoreMin, rangeEnd = scoreState, // rating scoreMax = scoreMax, scoreMin = scoreMin ) } } val animatedScoreDp: Dp by transition.animateDp( ... ) { state -> when (state) { RatingTransitionState.Initial -> 0 RatingTransitionState.Rated -> scoreTransitionDp } } var ratingBarWidthDpState: Dp by remember mutableStateOf(0.dp) } @Composable internal fun RatingBarCompose ... ConstraintLayout(modifier = Modifier .fillMaxWidth() ) { val (ratingBar, index) = createRefs() Row( modifier = Modifier.fillMaxWidth().height(ratingBarHe .constrainAs(ratingBar) { top.linkTo(index.top) bottom.linkTo(index.bottom) } ) {
58. val scoreTransitionDp: Dp by remember { derivedStateOf { ratingBarWidthDpState * getSectorWeight( rangeStart = scoreMin, rangeEnd = scoreState, // rating scoreMax = scoreMax, scoreMin = scoreMin ) } } val animatedScoreDp: Dp by transition.animateDp( ... ) { state -> when (state) { RatingTransitionState.Initial -> 0 RatingTransitionState.Rated -> scoreTransitionDp } } var ratingBarWidthDpState: Dp by remember mutableStateOf(0.dp) } @Composable internal fun RatingBarCompose ... ConstraintLayout(modifier = Modifier .fillMaxWidth() ) { val (ratingBar, index) = createRefs() Row( modifier = Modifier.fillMaxWidth().height(ratingBarHe .constrainAs(ratingBar) { top.linkTo(index.top) bottom.linkTo(index.bottom) } ) { .onGloballyPositioned { with(localDensity) { ratingBarWidthDpState = it.size.width. onRatingBarDraw.invoke() } }
59. @Composable internal fun RatingBarCompose ..., onRatingBarDraw: () -> Unit ) { var ratingBarWidthDpState: Dp by remember mutableStateOf(0.dp) } ConstraintLayout(modifier = Modifier .fillMaxWidth() ) { val (ratingBar, index) = createRefs() Row( modifier = Modifier.fillMaxWidth().height(ratingBarHe .constrainAs(ratingBar) { top.linkTo(index.top) val scoreTransitionDp: Dp by remember { derivedStateOf { ratingBarWidthDpState * getSectorWeight( rangeStart = scoreMin, rangeEnd = scoreState, // rating scoreMax = scoreMax, scoreMin = scoreMin ) } } val animatedScoreDp: Dp by transition.animateDp( ... ) { state -> when (state) { RatingTransitionState.Initial -> 0 RatingTransitionState.Rated -> scoreTransitionDp } } .onGloballyPositioned { with(localDensity) { ratingBarWidthDpState = it.size.width. onRatingBarDraw.invoke() } }
60. RatingBarCompose( ..., transition = transition, onRatingBarDraw = { currentState = RatingTransitionState.Rated } ) @Composable internal fun RatingBarCompose ..., onRatingBarDraw: () -> Unit ) { var ratingBarWidthDpState: Dp by remember { mutableStateOf(0.dp) } ConstraintLayout(modifier = Modifier .fillMaxWidth() ) { val (ratingBar, index) = createRefs() Row( modifier = Modifier.fillMaxWidth().height(ratingBarHeight) .constrainAs(ratingBar) { top.linkTo(index.top) bottom.linkTo(index.bottom) } ) { .onGloballyPositioned { with(localDensity) { ratingBarWidthDpState = it.size.width.toDp() onRatingBarDraw.invoke() } }
61. var currentState by remember { mutableStateOf( RatingTransitionState.Initial ) } val transition = updateTransition( currentState, label = “” ) RatingBarCompose( ..., transition = transition, onRatingBarDraw = { currentState = RatingTransitionState.Rated } ) @Composable internal fun RatingBarCompose ..., onRatingBarDraw: () -> Unit ) { var ratingBarWidthDpState: Dp by remember { mutableStateOf(0.dp) } ConstraintLayout(modifier = Modifier .fillMaxWidth() ) { val (ratingBar, index) = createRefs() Row( modifier = Modifier.fillMaxWidth().height(ratingBarHeight) .constrainAs(ratingBar) { top.linkTo(index.top) bottom.linkTo(index.bottom) } ) { .onGloballyPositioned { with(localDensity) { ratingBarWidthDpState = it.size.width.toDp() onRatingBarDraw.invoke() } }
62. @Composable fun RatingCompose @Composable internal fun RatingBarCompose ..., onRatingBarDraw: () -> Unit ) { var ratingBarWidthDpState: Dp by remember { mutableStateOf(0.dp) } ConstraintLayout(modifier = Modifier .fillMaxWidth() ) { val (ratingBar, index) = createRefs() Row( modifier = Modifier.fillMaxWidth().height(ratingBarHeight) .constrainAs(ratingBar) { top.linkTo(index.top) bottom.linkTo(index.bottom) } ) { var currentState by remember { mutableStateOf( RatingTransitionState.Initial ) } val transition = updateTransition( currentState, label = “” ) RatingBarCompose( ..., transition = transition, onRatingBarDraw = { currentState = RatingTransitionState.Rated } ) .onGloballyPositioned { with(localDensity) { ratingBarWidthDpState = it.size.width.toDp() onRatingBarDraw.invoke() } }
63. @Composable fun RatingCompose var currentState by remember { mutableStateOf( RatingTransitionState.Initial ) } val transition = updateTransition( currentState, label = “” ) RatingBarCompose( ..., transition = transition, onRatingBarDraw = { currentState = RatingTransitionState.Rated } )
64. @Composable fun RatingCompose
65. @Composable fun RatingCompose @Composable internal fun RatingHeaderCompose @Composable internal fun RatingBarCompose
67. Today’s desired outcome
70. animateInt animateFloat
71. Choose your Animation developer.android.com/ jetpack/compose/ animation/resources
74. @Composable fun RatingBigNumberCompose @Composable internal fun BigNumberCanvas
75. @Composable internal fun BigNumberCanvas Box { Canvas( Modifier .size(size) .aspectRatio(1f) .graphicsLayer { rotationZ = animatedDegree }, onDraw = { ... } ) Text(animatedScore) }
76. @Composable fun RatingBigNumberCompose var currentState by remember { mutableStateOf( RatingTransitionState.Initial ) } val transition = updateTransition( currentState, label = “” ) BigNumberCanvas( ..., transition = transition ) @Composable internal fun BigNumberCanvas Box { Canvas( Modifier .size(size) .aspectRatio(1f) .graphicsLayer { rotationZ = animatedDegree }, onDraw = { ... } ) Text(animatedScore) }
78. Measure through tooling developer.android.com/jetpack/compose/ tooling/#debug
79. Composition Tracing Layout Inspector
80. Layout Inspector Composition Tracing
86. Layout Inspector Composition Tracing
87. Layout Inspector Composition Tracing Time Compose:recompose android.compose.material.MaterialTheme android.compose.runtime.CompositionLocalProvider com.example.FooPage .MyImage .MyButton Untraced code debugImplementation( “androidx.compose.runtime:runtime-tracing:<version>” )
88. Layout Inspector Composition Tracing trace(“possible cause”) { // heavy operation into a composition scope } Time Compose:recompose android.compose.material.MaterialTheme android.compose.runtime.CompositionLocalProvider com.example.FooPage .MyImage .MyButton Untraced code
89. Layout Inspector Composition Tracing trace(“possible cause”) { // heavy operation into a composition scope } Time Compose:recompose android.compose.material.MaterialTheme android.compose.runtime.CompositionLocalProvider com.example.FooPage .MyImage .MyButton possible cause
90. Composition Tracing Layout Inspector
91. Mindset takeaways • think simple • and combine for the complex
92. ‘test and run’ takeaways • test with real devices • and tooling (might need to delay anim) • and eventually release buildType
93. Practicalities takeaways • avoid plenty of animations all over • micro-interactions are cool • defer reads by using lambda functions
94. pull request have fun fork
95. Jetpack Compose animations playground Thank you for listening ! December 2023 DevFest Ireland 2023