Flutter learning animation, understanding is limited, you see more advice, more inclusive ~

• Common animation
• AnimatedWidget
• AnimatedBuilder

Common animation

To animate a Flutter, you need to use the AnimationController to control the timing of the animation, start, reverse, pause, etc.

	 AnimationController _mAnimationController;
	 
	 _mAnimationController = new AnimationController(
	      vsync: this,
	      duration: Duration(seconds: 5));Copy the code

AnimationController parameters:

• Parameter a: vsync parameters, exist outside the vsync will prevent the screen animated UI is out of the current screen (animation) unnecessary resource consumption, often use with SingleTickerProviderStateMixin can

class _AnimationPageState extends State with SingleTickerProviderStateMixin {

}

Supplement:

If the project is only one in the animation using the SingleTickerProviderStateMixin, project TickerProviderStateMixin are used more than two animation

• Parameter 2 :duration Parameter: Set the animation execution time

• _mAnimationController. Forward () / / start the animation
• _mAnimationController. Reverse () / / reverse perform the animation
• _mAnimationController. Reset () / / reset
• _mAnimationController. The dispose () / / delete/stop the animation
• _mAnimationController.repeat(); // Repeat the execution

An Animation instance has two states:

• Animation
  
  changes the frame state
  
• Animation
  changes the Color state
  

Animation<double>, set the Animation. Finally, I will give you an example to change the Animation<Color>. You can try to write ~,

Animation<double>:Tween:

	Animation<double> _mAnimation;

	_mAnimation = new Tween<double>(begin: 0, end: 200)
        // Add the animation controller.animate(_mAnimationController) .. addListener(() { setState(() { print('_mAnimationValue:${_mAnimationValue}');
              _mAnimationValue = _mAnimation.value;
            });
          })
          ..addStatusListener((status) {
            setState(() {
              print('status:${status}');
              _mAnimationStaus = status;
            });
          });
Copy the code

Tween parameters:

• Begin to start
• End to end

The AnimationController is then added to the Tween parameter using animate(). So if you put it all together, it’s going from 0 to 200 in 5 seconds,_mAnimation. Value is the state that you get per second

Careful students may notice that the… What does addListener() mean

..addListener(() {
            setState(() {
              print('_mAnimationValue:${_mAnimationValue}');
              _mAnimationValue = _mAnimation.value;
            });
          })
          ..addStatusListener((status) {
            setState(() {
              print('status:${status}');
              _mAnimationStaus = status;
            });
Copy the code

In fact, this is Dart syntax, called concatenation, and it has the same effect as this:

   _mAnimation = new Tween<double>(begin: 0, end: 200)
        // Add the animation controller
        .animate(_mAnimationController);

    _mAnimation.addListener(() {
            setState(() {
              print('_mAnimationValue:${_mAnimationValue}');
              _mAnimationValue = _mAnimation.value;
            });
          });
    _mAnimation.addStatusListener((status) {
            setState(() {
              print('status:${status}');
              _mAnimationStaus = status;
            });
          });
Copy the code

• AddListener () adds frame listeners to the Animation. Each frame will be called, triggered by setState()
• AddStatusListener () adds an ‘Animation state change’ listener to the Animation

AddStatusListener is used to listen for the current state of the animation * Dismissed The animation stops at the beginning. * Forward, the animation runs from beginning to end. * The reverse animation is running backwards, from beginning to end. The animation stops at the end.Copy the code

There’s another way:

 // Create the animation controller
 AnimationController _mAnimationController;
	 
 _mAnimationController = new AnimationController(
	      vsync: this,
	      duration: Duration(seconds: 5));// Perform the animation
 _mAnimationController.forward();


 @override
  Widget build(BuildContext context) {
    return FadeTransition(
		 // Set the gradient animationopacity: _tweenAnimation, child: ; ) ; }Copy the code

Curve:

Curve is officially called ‘Curve’, but I feel it is similar to android Interpolator Curve example :Curve Reference _mAnimation interpolates Curve() using the chain() method

Take a look at the full code:

It is recommended that objects be created when initState() is initialized;

@override
  void initState(a) {
    // The initial brush Controller sets the execution time
    _mAnimationController = new AnimationController(
      vsync: this,
      duration: Duration(seconds: 5));// Set the change interval and listen
    _mAnimation = new Tween<double>(begin: 0, end: 200)
     	// Interpolator is the default linear.linear in Android
        .chain(new CurveTween(curve: Curves.bounceIn))
        // Add the animation controller
        .animate(_mAnimationController);

    _mAnimation.addListener(() {
            setState(() {
              print('_mAnimationValue:${_mAnimationValue}');
              _mAnimationValue = _mAnimation.value;
            });
          });
    _mAnimation.addStatusListener((status) {
            setState(() {
              print('status:${status}');
              _mAnimationStaus = status;
            });
          });
    /** * addStatusListener is used to listen for the current state of the animation * dismissed The animation stops at the beginning. * Forward, the animation runs from beginning to end. * The reverse animation is running backwards, from beginning to end. The animation stops at the end. * /

    super.initState();
  }
Copy the code

Container(
        alignment: Alignment.center,
        child: Column(
          children: [
            GestureDetector(
              onTap: () {
                / / reset
                _mAnimationController.reset();
                / /
                _mAnimationController.forward();
              },
              child: Text("Start",style: TextStyle(fontSize: 25),),
            ),
            Container(
              width: _mAnimationValue,
              height: _mAnimationValue,
              child: FlutterLogo(),
            )
          ],
        ),
      )
Copy the code

Finally, the animation controller needs to be destroyed when the page disappears for better recycling.

  @override
  void dispose(a) {
    // TODO: implement dispose
    // Recycle resources
    _mAnimationController.dispose();
    super.dispose();
  }
Copy the code

Rendering (1.1) :

AnimatedWidget

  AnimationController _mAnimationController;
  Animation<double> _mAnimation;

@override
  void initState(a) {
    // The initial brush Controller sets the execution time
    _mAnimationController = new AnimationController(
      vsync: this,
      duration: Duration(seconds: 5));// Set the change interval and listen
    _mAnimation = new Tween<double>(begin: 0, end: 200)
        // Interpolator is the default linear.linear in Android
        .chain(new CurveTween(curve: Curves.bounceIn))
        // Add the animation controller
        .animate(_mAnimationController);
        // Stop writing the addListener() method to listen for frame changes!
    super.initState();
  }
Copy the code

class AnimationWidget extends AnimatedWidget {
  AnimationWidget({Key key, Animation<double> animaiton})
      : super(key: key, listenable: animaiton);

  @override
  Widget build(BuildContext context) {
    // Get the Animation
      
        object using the parent method listEnable
      
    Animation<double> _mAnimation = listenable;
    returnContainer( width: _mAnimation.value, height: _mAnimation.value, child: FlutterLogo(), ); }}Copy the code

  @override
  void dispose(a) {
    // TODO: implement dispose
    // Recycle resources
    _mAnimationController.dispose();
    super.dispose();
  }
Copy the code

Container(
        alignment: Alignment.center,
        child: Column(
          children: [
            GestureDetector(
              onTap: () {
                / / reset
                _mAnimationController.reset();
                / /
                _mAnimationController.forward();
              },
              child: Text("Start",style: TextStyle(fontSize: 25),),),// Call the AnimationWidget to pass Animaiton to it.
            AnimationWidget(animaiton: _mAnimation),

          ],
        ),
      ),
Copy the code

AnimatedBuilder

AnimatedBuilder also simplifies the addListener() method by giving the layout and animation directly to the AnimatedBuilder

Animation conditions remain the same:

  AnimationController _mAnimationController;
  Animation<double> _mAnimation;

@override
  void initState(a) {
    // The initial brush Controller sets the execution time
    _mAnimationController = new AnimationController(
      vsync: this,
      duration: Duration(seconds: 5));// Set the change interval and listen
    _mAnimation = new Tween<double>(begin: 0, end: 200)
        // Interpolator is the default linear.linear in Android
        .chain(new CurveTween(curve: Curves.bounceIn))
        // Add the animation controller
        .animate(_mAnimationController);
        // Stop writing the addListener() method to listen for frame changes!
    super.initState();
  }
Copy the code

The mandatory arguments to create AnimatedBuilder are: Builder: (BuildContext Context, Widget Child) {}); Animation is required as well

	AnimatedBuilder(
              child: Container(
                color: Colors.yellow,
                width: 100,
                height: 100,
                child: FlutterLogo(),
              ),
              builder: (BuildContext context, Widget child) {
                return Container(
                // Start with 100 instead of 0
                  width: _mAnimation.value + 100,
                  height: _mAnimation.value + 100.// Child is FlutterLogo()
                  child: child,
                );
              },
              // The required argument animates the layout image
              animation: _mAnimation,
            )
Copy the code

Rendering (1.3) :

Animation < Color > example:

I’m using the AnimatedWidget approach

The first step is still the same. Set the AnimationController and then set the Color state from colors.amber to colors.tealaccent

 @override
  void initState(a) {
    // The initial brush Controller sets the execution time
    _mAnimationController = new AnimationController(
      vsync: this,
      duration: Duration(seconds: 5));// Change the color state
    _mAnimationColor =
        new ColorTween(begin: Colors.amber, end: Colors.tealAccent)
            .animate(_mAnimationController);

    super.initState();
  }
Copy the code

Animation

and Animation
are used separately.

class AnimationWidget extends AnimatedWidget {
  
  //isColor true is the Animation
      
        type
      
  // false is Animation
      
  bool isColor;

  AnimationWidget(
      {Key key,
      Animation<Color> animaitonColor,
      Animation<double> animaitonDouble,
      @required this.isColor})
      : super(key: key, listenable:isColor == true? animaitonColor :animaitonDouble);

  Animation<Color> _mAnimationColor;
  Animation<double> _mAnimationDouble;

  @override
  Widget build(BuildContext context) {
    // Get the Animation
      
        object using the parent method listEnable
      
    if (isColor) {
      _mAnimationColor = listenable;
    } else {
      _mAnimationDouble = listenable;
    }

    return isColor == true
        ? Container(
            width: 100,
            height: 100, color: _mAnimationColor.value, child: FlutterLogo(), ) : Container( width: _mAnimationDouble.value, height: _mAnimationDouble.value, child: FlutterLogo(), ); }}Copy the code

Resource recovery

  @override
  void dispose(a) {
    // TODO: implement dispose
    // Recycle resources
    _mAnimationController.dispose();
    super.dispose();
  }
Copy the code

Rendering (1.4) :

The complete code