DISCOVER FLUTTER — WEEK #6
The Holy Trinity Of Every Animation | Circular reveal animation example
Whether you want to create your own custom animation or use pre-existing packages, you need to understand the three essential blocks of each animation. This will ensure that you can easily use both.
So the Holy Trinity of each animation is made up of the following blocks:
- Animation controller
- Animation value
AnimationController can be viewed as the mother of any animation.
Like any mother, she will decide when the animation would start when it would end, how long it would take, etc.
We can think of a Ticker as a stopwatch, and with each tick, our animation will change as it causes triggering of the setState method which will change our animation value, in terms of appearance, color, etc.
Fact #1: Because we are triggering the setState method, this implies that we need a Stateful Widget if we want to use animations in our app.
The last building component is the value of the animation itself. In the end, the appearance of our animation will depend on this value. Animation value usually ranges from 0 to 1 and through this value we can control the height, width, color, etc.
Mix the Holy Trinity to make an animation
We will now go through last week’s example, but this time paying attention only to the animation. The main goal is to start animation every time the Body widget configuration changes, e.g. iconData property.
In this example, circular_reveal_animation Flutter package was used. We will pass our created animation to this widget.
circular_reveal_animation | Flutter Package
Circular Reveal Animation as Flutter widget! Inspired by Android's ViewAnimationUtils.createCircularReveal(...).
Step 1: Start with the mother
Since the animation controller is the mother of every animation, we will create this variable first.
The right time to initialize this controller is in the initState method, which will be triggered when the StatefulWidget is created. The constructor of this controller receives a number of properties, but these are the important one:
- duration — Determines the duration of the created animation based on the passed Duration object
- vsync — This is the place where you provide the Ticker. And that Ticker Provider will be exactly our state class after we give it a “new power”. To make our class a Ticker Provider it is necessary to add the keyword “with” and specify the power type — the TickerProviderStateMixin power. This mixin provides Ticker objects that are configured to only tick while the current tree is enabled. After giving our state class the new power, to be a Ticker, we will pass a reference of our state object to our vsync property, using the reserved word this.
Fact #2: When we have multiple animations then we would use the TickerProviderStateMixin, on the other hand, if we want to animate only one time, we would use SingleTickerProviderStateMixin.
Fact #3: What mixins allow us, as opposed to inheritance, is that we can add more mixins to one class, ie. more “superpowers”. For mixins, we are using the reserved word — with.
In order to reach the value of animation, it is necessary to start it. And we do this also in the initState method by using the forward method of the controller. This method will increase the animation value from 0 to 1 for the time period we passed to the Duration object.
Step 2: Use Curves
To use curves, we have to create another variable and this variable is going to be of type Animation.
We initialize the animation property as CuvedAnimation within the initState method, as it was the case with the controller property. Curved animation has two required properties:
- curve — a type of curve we want to use for our animation value. In this example, we used easeIn curve.
- parent — our mother, controller
Fact #4: Make sure that your upper bound is not greater than 1 when you're applying a curved animation to your controller. All curves go from 0 to 1.
Step 3: Repeat animation
Since our goal is to repeat this animation, ie. that it doesn’t just happen when the initState method is called, it is necessary to create a method named startAnimation. Within it, copy everything you need for our animation to work, ie. everything within the initState method.
Now the question is in what situations do we want our animation to be repeated? In my example, we will change the animation every time the input parameters change, so every time the iconData property changes.
For this, we need the didUpdateWidget method, and it is called whenever the widget configuration changes, which is exactly what we need. So within it, we will call our startAnimation method created above.
Step 4: Don’t forget to dispose of the Animation Controller
When we use any type of animation, what we must not forget is that even though we destroy this widget when we dismiss it, the controller continues to live, and consumes application resources.
For this reason, each animation must be accompanied by a dispose method within which we will “shut down” our controller.
Step 5: Use created animation in the CircularRevealAnimation widget
What is left for us is to pass on the created animation to the animation property, of the CircularRevealAnimation widget, after we have previously installed it in the pubsbec.yaml configuration file.
Our animation of the iconData is now ready :)
You can find the completed project on the next link:
FYI: If you are a fan of short interesting texts covering various Flutter topics, and you want to get into the habit of learning Flutter with me in the next 24 weeks, you can join reading my articles every Tuesday.
If you have any questions or comments about this post, feel free to reply below or reach out to me via LinkedIn.
For those who want to jump into our Flutter journey, links from the previous weeks can be found below:
See you next week, don’t break the streak! :)