Flutter records and learns different animations (1)

1. Classification of animations

There are two main types in flutter

Motion tweening: In an animation tween, a start and end point, a timeline, and a curve for transition time and speed are defined.It is then up to the framework to calculate how to transition from the start point to the end point.

Physical animation: In physics-based animation, motion is simulated to resemble real-world behavior.

Second, common core classes in animation

a. Animation: Used to monitor the state of animation and get the animation change value.
b. Aniamtable: Calculate the real value of the animation according to the given start value and end value.
c. AnimationController: Animation controller, which controls the animation start, pause, end and other states.Inherit Animation.A vsync parameter needs to be passed to prevent off-screen animations from consuming unnecessary resources when vsync exists.
d. Tween: Change value overloader, such as color change value, numerical change value.Inherit Animatable
e. addListeners and addStatusListeners: The former is mainly used to monitor changes in animation values, while the latter is mainly used to monitor changes in animation status, such as pause, start, end, and complete.
f. CurvedAnimation: Used to define nonlinear curve animations, such as acceleration, uniform speed, acceleration and deceleration, etc., to indicate how the animation runs.Inherited from Animation, which is equivalent to wrapping the animation value, and the interpolated value of the animation can be directly obtained through .value.
g.Curve: animation interpolator (used to change the value of the animation, such as calculating the current value of the animation, put it as the x value into the function to calculate the value of y) the custom interpolator inherits it

Three, the use of animation

pseudocode

 AnimationController _controller;Animation<double> _animation;@overridevoid initState() {super.initState();_controller = AnimationController(duration: Duration(milliseconds: 2000), vsync:this);_animation = CurvedAnimation(parent: _controller,curve: Curves.fastOutSlowIn,);_animation =Tween(begin: 0 end: 100).animate(_animation);_controller.addListener((){setState(() { });}} ;_controller.forward();}@overrideWidget build(BuildContext context) {return Container(width: _animation.value,color: Colors.red,);}

Four. Summary

The animation written in this way has a big disadvantage, that is, it needs to use setState to continuously refresh the page according to the animation value.
When the page is more complicated, if it is not good, it will lead to performance problems.So he needs to be taken out.This is the two officially encapsulated animation classes to be mentioned later, namely AnimatedWidget and AnimatedBuilder.