Table of contents
1. The idea of Flutter implementation
2. Use drawing or code to achieve animation effects
3. Use implicit animation or display animation to achieve
First picture the town building
1. The idea of Flutter implementation
When we decide to do some animations, the first thing to consider is what are the ways to implement animations in Flutter and which implementation method we need to choose to meet our needs. Regarding this point, the official document also provides us with an idea, as shown in the following figure:
2. Use drawing or code to achieve animation effects
Drawing-based animation looks like drawing, such as game characters, or animations that are difficult to express in pure code. If you have to draw and realize animation by yourself or the team, you can consider using a third-party library such as Rive or Lottie, export the animation after completing the animation, and then package the completed animation into the resource file of the project for loading. If the components provided by the system can achieve the effect we need, we can achieve it through coding.
3. Use implicit animation or display animation to achieve
If our component can satisfy the effect only by modifying the properties of the widget, in this case we can consider using invisible animation. For example, if we want to make a gradient, zoom animation, and pan animation, we only need to change the transparency, zoom ratio, position and other properties of the widget to achieve it. At this time, implicit animation is a good choice. For example, to achieve the following effects, click the button below to achieve the above Container space zoom, color change, fillet change and other effects, we only need to change the Container class to achieve, this time implicit animation is not much choice . We only need to write the initial values before and after the animation, and set the properties of the animation.
Figure 2. Implicit animation
Corresponding to the implicit animation is the display animation in Flutter. In addition to realizing everything that the implicit animation can do, the display animation also provides more functions. For example, when there is a looping animation in our animation, it is similar to the following The progress of similar refresh in the figure.
From the time the data is loaded until the data is loaded, the button is constantly rotating, such as a picture that is repeatedly rotated. Or when we use the taxi-hailing software, the continuous water ripple animation displayed during the taxi-hailing process, zhe'ge or the animation produced by the cooperation of multiple Widgets, in this case we can only choose to use the display animation.
Figure 3. Pull down to refresh animation
There is an additional AnimationController property for displaying animation. Through this property, we can control the properties of animation more precisely. The disadvantage is that we must manually manage the life cycle of AnimationController.
4. Which Widget to use
We know that in Flutter, everything is a Widget, and the same is true.
After deciding to use implicit animation or display animation, you can consider the last question, whether the system provides built-in components to meet my requirements. Implicit animation can generally be implemented using the AnimayetedFoo class. Foo refers to the properties of the animation to be set. For example, if we want to create an animation that changes the transparency of a Container from 0 to 1, it can be implemented with AnimatedOpacity.
If you can't find the corresponding built-in components, you can use TweenAnimationBuilder to create custom animations. The display animation is implemented by a widget named Foo Transition, such as lSideTransition.
If the system's display animation cannot meet the needs, you can use custom display animation to expand AnimatedWidget or AnimatedBuilder. Of course, if you have high performance requirements, you can also consider using the system's CustomPainter to draw animation yourself. But if you are not so familiar with Flutter, using this method to draw animation may cause performance problems.
The difficulty level of these animations is as follows:
| Difficulty from left to right (easy ---> difficult) | ||||
| AnimatedFoo | TweenAnimationBuilder | FooTransition | AnimationBuilder（AnimatedWidget） | CustomPainter |
This article only provides ideas for animation implementation and how to choose the way to implement animation. Subsequent articles will introduce the implementation of animation in detail.