Jetpack Compose has many animation APIs to add pizzazz to UIs. You can find the full list at developer.android.com/​jetpack/​compose/​animation. The same page also has tips to help you decide which function you should use to achieve a certain type of animation.

For this challenge, add some grandeur to Coda Pizza by incorporating animations into your UI. Currently, adding a topping to Coda Pizza causes your pizza’s preview to change abruptly. Make this change more graceful by fading the topping onto the pizza. (Hint: Try using the Crossfade composable.)

For more of a challenge, add some excitement when placing an order. When the user presses the PLACE ORDER button, make their pizza preview spin in a complete circle.

This will require several changes to your code, including refactoring your OrderButton with a new lambda parameter to be called when an order is placed. You will also need to update your ToppingsList composable to accept information about the pizza preview’s rotation. The pizza can be rotated using the Modifier.rotate(Float) modifier. There are several animation APIs that can drive this animation, but we recommend using either animateFloatAsState or Animatable.