Disney Plus Logo Animation — Jetpack Compose
Jetpack Compose moves the bar on animations from ‘polish, if we have the time’ to ‘so easy there’s no reason to not do it” and a big part of that are animate*AsState() animate objects.
Compose Animations
Jetpack Compose has come a long way and one of the major improvements over the View system has been that of animations and transitions. Even some low-level animation APIs such as animateTo() and animate*AsState() are extremely powerful and easy to use.
Animation Preview
Getting Started
If we look closely, this animation has three components
- Disney text
- Arc animation
- + sign expanding when the arc animation ends.
Firstly, we will be building the UI of the logo, and later on, we can give the animation effect to the components.
Colors which we will be using
GradientColor is used to give a gradient to the circular arc in the logo.
In order to draw the arc, we can use the drawBehindModifier which helps to draw UI on the canvas of the composable.
drawArc can be used to draw an arc that is scaled to fit inside the given rectangle (here we have used the Box). It starts from startAngle degrees to startAngle + sweepAngle degrees around the oval, with zero degrees being the positive side of the x-axis.
Here we have selected the size of the Box and the startAngle and sweeAngle in such a way that the arc coincides with the + image in the logo.
Rather than giving a solid color, we have given a linearGradient to the arc with the provided colors along with the given start and end coordinates. The colors are dispersed at the provided offset defined with the colorstop pair.
Now the UI is complete and we can look forward to animating the components of the UI.
animationPlayed , plusAnimationPlayed are state variables that keep track of whether the animation has been played or not, and by changing their values we can trigger the animation.
currentPercent is a State object which keeps track of the sweep of the arc.
scalePercent helps to animate the + image with the scale effect.
We have to call animationPlayed = true in LaunchedEffect as we only want it to run once and LaunchedEffect will only run once in a composable function as its key is constant and it never changes.
Once the animation code is complete, we have to change the hardcoded values with the State Object variables, which will help to animate the view.
Full Code Sample can be found here.
