Jetpack Compose Animations

In this episode, learn the fundamental philosophy and principles behind animations in Jetpack Compose. Learn how they differ from animations in the old XML UI paradigm and how you can orient your thinking to make the transition from old animations to new Jetpack Compose animations smooth.

Learn how to animate content size changes in Jetpack Compose with using a convenient new Modifier.

In this episode, get introduced to the set of animate*AsState methods included in the Jetpack Compose framework to animate the rotation property of an icon in a Floating Action Button.

In this episode, learn how to use the AnimatedVisibility composable to animate in a post creation composable. You’ll also learn about the fun and easy ways you can customize the enter and exit animations of AnimatedVisibility.

Most applications have to show a loading state before they show some type of content. In this episode, learn how to use the CrossFade composable to easily fade between a loading state and the full applications social media feed.

In the world of animations, it’s often necessary to control your animation at a high level of granularity. In this episode, get introduced to the updateTransition composable and learn how it differs from the animation tools you’ve used so far.

In this episode, learn how to coordinate multiple animations via the updateTransition composable. You’ll then use your new knowledge to animate like counts as a user likes or unlikes a post in the application.

In the previous episode you used updateTransition to create a fancy new animation animating changes in a like count for a post. In this episode, learn how to pull that animation code out of the composable it’s currently in and into its own reusable composable for future use.

In this episode, learn how to customize the transitionSpec property of transitions to control length, interpolation, and the look and feel of the animation. Learn the difference between tween, spring, and keyframe animations, when to use each, and how to customize their properties.

One of the wonderful things about animations in Jetpack Compose is that they come with lots of tooling support. In this episode, learn how to use the Animation Preview window in Android Studio to easily test your animations.

In this application, you’re using the HorizontalPager composable from the Accompaniast library to show a pager of images for a post. In this episode, learn how to animate the transition between different pages, and how Jetpack Compose makes these types of animations easy.

Lots of social media applications have put a lot of effort into making like a post a visually pleasing action. In this episode, learn what the animation we’re trying to achieve looks like and how to show the heart when a user likes a post.

In this episode, learn how to animate the size of the heart so that it grows from zero size up to the full heart, and how to make sure that the timing of the heart growing and collapsing is visually pleasing.

One of the most important things that hearts do is beat! In this episode, use the keyFrame transitionSpec to animate a heart beat into your like animation. You’ll also double down on using the Animation Preview utility to make testing the heart beat as easy as can be.

In this episode, learn how to add some extra pizazz to your heart animation by drawing a burst of yellow light behind the heart. You’ll learn how to combine the drawBehind modifier with your animating values to finish off this animation.