Jetpack Compose animations playground | DevFest Pescara 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. November 2023 Jetpack Compose animations playground Daniele Favaro Android Dev @ GDG Android Stockholm
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
20. animateInt AnimatedVisibility animateDp animateColor
21. Choose your Animation developer.android.com/jetpack/compose/ animation/resources
31. developer.android.com/jetpack/compose/ animation/resources
34. @Composable fun RatingCompose @Composable internal fun RatingHeaderCompose @Composable internal fun RatingBarCompose
35. @Composable internal fun RatingHeaderCompose
36. @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 )
37. 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() } }
38. 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) } } }
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. @Composable internal fun RatingHeaderCompose
41. @Composable fun RatingCompose @Composable internal fun RatingHeaderCompose @Composable internal fun RatingBarCompose
42. @Composable internal fun RatingBarCompose
43. @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 ) {
44. } 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 ) } } } }
45. Row(modifier = Modifier.fillMaxWidth().padding(top = defaultMarginS)) { scoreRanges.forEachIndexed { index, range -> // labels } }
46. 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(…) } } }
47. 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)
48. 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)
49. 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 ) }
50. 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 } }
51. @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 } }
52. internal fun getSectorWeight( rangeStart: Int, rangeEnd: Int, scoreMax: Int, scoreMin: Int ): Float = (rangeEnd - rangeStart).toFloat() / (scoreMax - scoreMin) 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 } }
53. 0 100 50 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 } } internal fun getSectorWeight( rangeStart: Int, rangeEnd: Int, scoreMax: Int, scoreMin: Int ): Float = (rangeEnd - rangeStart).toFloat() / (scoreMax - scoreMin)
54. 0 100 50 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 } } internal fun getSectorWeight( rangeStart: Int, rangeEnd: Int, scoreMax: Int, scoreMin: Int ): Float = (rangeEnd - rangeStart).toFloat() / (scoreMax - scoreMin)
55. 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 } } 0 100 50 internal fun getSectorWeight( rangeStart: Int, rangeEnd: Int, scoreMax: Int, scoreMin: Int ): Float = (rangeEnd - rangeStart).toFloat() / (scoreMax - scoreMin)
56. 0 100 50 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 } } internal fun getSectorWeight( rangeStart: Int, rangeEnd: Int, scoreMax: Int, scoreMin: Int ): Float = (rangeEnd - rangeStart).toFloat() / (scoreMax - scoreMin)
57. 0 100 50 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 } } internal fun getSectorWeight( rangeStart: Int, rangeEnd: Int, scoreMax: Int, scoreMin: Int ): Float = (rangeEnd - rangeStart).toFloat() / (scoreMax - scoreMin)
58. @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()
59. 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 } }
60. .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) } ) {
61. 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() } }
62. @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() } }
63. 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() } }
64. 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() } }
65. @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() } }
66. @Composable fun RatingCompose var currentState by remember { mutableStateOf( RatingTransitionState.Initial ) } val transition = updateTransition( currentState, label = “” ) RatingBarCompose( ..., transition = transition, onRatingBarDraw = { currentState = RatingTransitionState.Rated } )
67. @Composable fun RatingCompose
68. @Composable fun RatingCompose @Composable internal fun RatingHeaderCompose @Composable internal fun RatingBarCompose
70. Today’s desired outcome
72. animateInt animateFloat
73. Choose your Animation developer.android.com/ jetpack/compose/ animation/resources
76. @Composable fun RatingBigNumberCompose @Composable internal fun BigNumberCanvas
77. @Composable internal fun BigNumberCanvas Box { Canvas( Modifier .size(size) .aspectRatio(1f) .graphicsLayer { rotationZ = animatedDegree }, onDraw = { ... } ) Text(animatedScore) }
78. @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) }
80. Measure through tooling developer.android.com/jetpack/compose/ tooling/#debug
81. Composition Tracing Layout Inspector
82. Layout Inspector Composition Tracing
88. Layout Inspector Composition Tracing
89. 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>” )
90. 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
91. 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
92. Composition Tracing Layout Inspector
93. Mindset takeaways • think simple • and combine for the complex
94. ‘test and run’ takeaways • test with real devices • and tooling (might need to delay anim) • and eventually release buildType
95. Practicalities takeaways • avoid plenty of animations all over • micro-interactions are cool • defer reads by using lambda functions
96. pull request have fun fork
97. Jetpack Compose animations playground November 2023 Thank you for listening !