For starters, after reading this article, I think you must be Naogua Zi buzzing, what this is saying ah.
Do not be impatient, I started and you are the same, after reading the first pass, do not know what to say, do not understand it does not matter, first collection of this article, and then went to study at Flutter built-in 25 kinds of animation elements.
address:http://laomengit.com/flutter/module/animated_1/。
Do not just look at, to write, to write only to find the problem.
When you have a certain understanding of the animation control, the thin back to product a product of this article, you will have a different feel, you goods, you fine chemicals.
The contents of this article is Google's original Flutter engineer Emily, I just translated the original address:https://www.youtube.com/watch?v=GXIJJkq_H8g。
Broadly speaking, Flutter animation components into two types,
- Drawing-based animations: based animators, like painting, like, generally are independent controls, such as game characters or difficult to use pure pieces of code to complete the effect.
- Core-based animations: based on the core animation, it component-oriented, standards-based layout and style, in essence, tends to enhance the appearance and transition effects control, rather than trying to act as an independent control.
Think about your animation is based rendering, or based on the core (component):
- If it is based rendering, and you have a special team of designers to provide material, I suggest you use third-party tools, such as Rive and Lottie, these libraries can easily import the resources to build the animation.
- If it is based on the core (assembly), a change in the components involved, such as color, shape, position change.
In Flutter based core (assembly) animation is divided into two categories:
- Implicit animation control: simply to provide components to start, end values, the animation system, such as AnimatedAlign and other components.
- Explicit Animation Control: AnimationController need to set up, control the animation of the execution, using explicit animation effects can be done any implicit animation, and even some of the more feature-rich, but you need to manage the life cycle of the animation AnimationController, AnimationController not a control, it needs to be put stateful control.
From the classification above, we can see that using implicit animation control, code simpler, but without managing AnimationController life cycle.
How to determine the implicit or explicit animation control animation control? You need to consider three questions:
- Whether the animation is repeated, such as the music player.
- Animation values are not continuous, such as a circle, discontinuous change size: small -> large and small -> large and small -> large. Continuous change size: Small -> Large -> Small -> Large.
- Is there a movie with multiple components.
If you are in any of these three questions an answer "yes", then you need to use an explicit animation control, or you use an implicit animation controls.
Once you have determined to use the explicit or implicit animation control animation control, this time you need to find the corresponding components, whether the components you need is already built in Flutter in?
For implicit components for:
- Already built: directly, of course, can look AnimatedContainer components, AnimatedContainer is very powerful and versatile animation components.
- No built-: TweenAnimationBuilder can be used to create a custom animation controls.
For display components for:
- Built-in: direct use of related components, such as xxxTransition components.
- Not built: a custom animation controls.
A custom animation components require explicit acknowledgment animation component is a component or part of a separate component,
- A separate display component: You should inherit AnimatedWidget to achieve.
- Part of the assembly: using AnimatedBuilder to achieve.
There is one final thing to consider: if you find performance problems caused by the CustomPainter, you can use it just like AnimatedWidget, but CustomPainer paint directly onto the canvas, without the need to build a standard widgets example, if used well, can create some neat, rich effects to customize or save performance, but if used well, your animation may cause more performance problems, just like manual memory management, properly handle the shared pointer, so why should with, whether there are memory problems, these problems should be considered.
Concluded in the following figure:
communicate with
If you still have doubts or questions about the technical aspects of Flutter, Flutter welcome to join the exchange group (micro letter: laomengit).
I also welcome the attention of the public Flutter number [programmers] Lao Meng, public starting Flutter number of relevant content.
Flutter Address:http://laomengit.com which contains a plurality of detailed usage assemblies 160.