Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to choose Flutter animation controls", the content of the explanation is simple and clear, easy to learn and understand, now please follow the editor's ideas slowly in depth, together to study and learn "how to choose Flutter animation controls" bar!

In a broad sense, Flutter animation components are divided into two types

Drawing-based animations: drawing-based animation, like drawing, is usually a stand-alone control, such as a game character or an effect that is difficult to accomplish in pure code.

Core-based animations: based on core animation, it is component-oriented, based on standard layouts and styles, and in essence tends to enhance the appearance and transition of controls, rather than acting as independent controls.

Think about whether your animation is based on drawing or core (component):

If it is based on rendering, and there are specialized designers on your team to provide material, it is recommended that you use third-party tools such as Rive and Lottie, these libraries can easily import resources to build animation.

If it is based on the core (component), it involves changes in components, such as color, shape, position, and so on.

There are two types of core (component)-based animation in Flutter:

Implicit animation controls: just provide the component start and end values, and the system performs animation, such as AnimatedAlign and other components.

Explicit animation control: need to set up AnimationController, control the execution of animation, use explicit animation can complete any implicit animation effect, or even richer, but you need to manage the animation AnimationController life cycle, AnimationController is not a control, so you need to put it in the stateful control.

From the above categories, it is not difficult to see that with implicit animation controls, the code is simpler and there is no need to manage the life cycle of AnimationController.

How do I determine whether to use implicit animation controls or explicit animation controls? There are three questions you need to consider:

Whether the animation is repeated all the time, such as music playback.

Whether the animation values are discontinuous, such as a circle, discontinuous size changes: small-> large, small-> large, small-> large. Continuous dimensional changes: small-> large-> small-> large.

Whether there are multiple components animating together.

If you answer "yes" to any of these three questions, then you need to use explicit animation controls, otherwise you will use implicit animation controls.

Once you have decided to use explicit or implicit animation controls, you need to find the corresponding component. Is the component you need already built into Flutter?

For implicit components:

Already built-in: for direct use, of course, you can also take a look at the AnimatedContainer component, AnimatedContainer is a very powerful and versatile animation component.

Not built-in: you can use TweenAnimationBuilder to create a custom animation control.

For display components:

Built-in: use related components directly, such as xxxTransition components.

Not built-in: customize an animation control.

To customize an explicit animation component, you need to confirm whether the animation component is a single component or part of a component

A single display component: you should inherit AnimatedWidget to implement it.

Part of the component: implemented using AnimatedBuilder.

One last thing to consider: if you find performance problems caused by CustomPainter, you can use it like AnimatedWidget, but CustomPainer is drawn directly to the canvas without the need for standard widget building examples. If used well, you can create some neat, rich custom effects or save performance, but if you use it badly, your animation may cause more performance problems. Just like managing memory manually, it is necessary to deal with shared pointers, why they are used this way, and whether there are memory problems.

Thank you for your reading, the above is the content of "how to choose Flutter animation control", after the study of this article, I believe you have a deeper understanding of how to choose Flutter animation control, the specific use of the situation also needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.