[shutter] animation animation (animatedbuilder animation use process | create animation controller | create animation | create components for animation | associate animation with components | animatio

AnimatedBuilder Animation usage process :

① Create animation controllers

② Create animation

③ Create animated components

④ establish AnimatedBuilder Associate animation with components

⑤ Perform animation

◯、AnimatedBuilder introduce

---

In the last blog 【Flutter】Animation Animation ( AnimatedWidget Animation usage process | Create animation controllers | Create animation | establish AnimatedWidget Animation components | Animation runs ) in , Used AnimatedWidget Component implementation animation , Omit adding listeners manually , And manually call in the listener setState Operation of updating animation ;

Use AnimatedWidget Method to achieve animation , And Widget The coupling of components is still very high , Introduce here AnimatedBuilder , Can be Animation Animation and Widget Component separation ;

AnimatedBuilder You can build generic Widget , AnimatedBuilder Can be used to split animation And Components ;

Functions that need to be separated in animation development :

• Show the components of animation
• Definition Animation Animated objects
• take Animation Render to components

AnimatedBuilder In terms of monitoring mechanism, it is similar to AnimatedWidget similar , Also automatically add listeners , Monitor the execution of animation , Automatically call setState Method update interface ;

One 、 Create animation controllers

---

AnimationController Constructor parameter description :

AnimationController(	{ 
    double? value, ///  The initial value of the animation 	Duration? duration, ///  Animation forward playback duration 	Duration? reverseDuration, ///  Animation playback duration in reverse order 	String? debugLabel, ///  Flags that identify animation during debugging 	double lowerBound: 0.0, ///  Animation minimum 	double upperBound: 1.0, ///  Animation max  	AnimationBehavior animationBehavior: AnimationBehavior.normal,	///  Contextual  TickerProvider ,  Used to prevent off screen animation from consuming unnecessary resources  , 	///  Generally will  StatefulWidget  As  vsync  value 	required TickerProvider vsync} )

Among the above parameters , Just set up required TickerProvider vsync Parameters And Duration? duration Parameters can be ;

Create an animation controller code example :

    /// 1.  Initialize the animation controller     animationController = AnimationController(      //  When the animation is drawn outside the screen ,  Reduce consumption       vsync: this,      //  Animation duration  2  second       duration: Duration(seconds: 3),    );

Two 、 Create animation

---

Here to create Tween Patch animation , Set initial values for animation

0

0

0 , End value

300

300

300 , The animation is executing

3

3

3 In seconds ( Animation duration specified in the animation controller ) , Automatically calculate the

0

0

0 ~

300

300

300 Animation values between ;

Create animation code examples :

    /// 2 .  structure  Tween  Patch animation  ,    ///  Set up animation controller  AnimationController  Animate the room     ///  The animation value is the width and height of the square component     animation = Tween<double>(      begin: 0,      end: 300    ).animate(animationController)

3、 ... and 、 Create animated components

---

Create a pure stateless component StatelessWidget , The component is connected with Animation Each animated object is independent , Use AnimatedBuilder coupling Animation And Components ;

Code example :

/// 3 .  Define pure components ,  Animation is applied to this component class AnimationWidget extends StatelessWidget{ 
      @override  Widget build(BuildContext context) { 
        return //  The main component of the animation       //  Use animated values in layout components  ,  In order to achieve the animation effect       Container(        decoration: BoxDecoration(color: Colors.red),      );  }}

Four 、 establish AnimatedBuilder Associate animation with components

---

establish AnimatedBuilder , Associate animation with components ;

First of all, put AnimatedBuilder , Animation Animation , Widget Components , All encapsulated in one StatelessWidget In the component , Flutter Everything in the world is a component ;

Then return a containing in this component AnimatedBuilder Components of components , Among them, the Animation Animation and Widget Components are set in this AnimatedBuilder in , Animation The animation is set in animation Field , child The field needs to be set to build Field , The setting method is as follows :

        AnimatedBuilder(          animation: animation,          builder: (context, child) => Container(            height: animation.value,            width: animation.value,            child: child,          ),          child: child,        )

Code example :

/// 4 .  Combine components with animation class AnimationTransition extends StatelessWidget{ 
      ///  Construction method   AnimationTransition({ 
    this.child, this.animation});  ///  Animated components   final Widget child;  ///  Animation   final Animation<double> animation;  @override  Widget build(BuildContext context) { 
        /// AnimatedBuilder  Will automatically monitor  animation  The change of     ///  Then render  child  Animation on components     return Column(      children: [        Text(" Animation state  : ${animation.status}", textDirection: TextDirection.ltr,),        Text(" Animation values  : ${animation.value?.round()}", textDirection: TextDirection.ltr,),        Container(height: 50,),        AnimatedBuilder(          animation: animation,          builder: (context, child) => Container(            height: animation.value,            width: animation.value,            child: child,          ),          child: child,        )      ],    );  }}

5、 ... and 、 Animation runs

---

monitor GestureDetector Of onTap Click event , After clicking this component , call animationController.forward() Method , Run the animation ;

Code example :

          GestureDetector(            // 5 .  Click the button to start the animation             onTap: (){ 
                  ///  Button click event               ///  First initialize the animation               animationController.reset();              ///  Executing animation forward ,  That is, from the initial value to the end value               animationController.forward();            },            child: Container(              alignment: Alignment.center,              color: Colors.green,              height: 50,              child: Text(                //  Show text                 " Animation start ",                ///  Text direction  :  From left to right                 textDirection: TextDirection.ltr,              ),            ),          ),

6、 ... and 、 Complete code example

---

Complete code example :

import 'package:flutter/material.dart';void main() { 
      runApp(AnimationApp());}/// 3 .  Define pure components ,  Animation is applied to this component class AnimationWidget extends StatelessWidget{ 
      @override  Widget build(BuildContext context) { 
        return //  The main component of the animation       //  Use animated values in layout components  ,  In order to achieve the animation effect       Container(        decoration: BoxDecoration(color: Colors.red),      );  }}/// 4 .  Combine components with animation class AnimationTransition extends StatelessWidget{ 
      ///  Construction method   AnimationTransition({ 
    this.child, this.animation});  ///  Animated components   final Widget child;  ///  Animation   final Animation<double> animation;  @override  Widget build(BuildContext context) { 
        /// AnimatedBuilder  Will automatically monitor  animation  The change of     ///  Then render  child  Animation on components     return Column(      children: [        Text(" Animation state  : ${animation.status}", textDirection: TextDirection.ltr,),        Text(" Animation values  : ${animation.value?.round()}", textDirection: TextDirection.ltr,),        Container(height: 50,),        AnimatedBuilder(          animation: animation,          builder: (context, child) => Container(            height: animation.value,            width: animation.value,            child: child,          ),          child: child,        )      ],    );  }}///  Animation example main interface component ///  This component is stateful ,  So we need to define  StatefulWidget  Components class AnimationApp extends StatefulWidget{ 
      @override  _AnimationAppState createState() => _AnimationAppState();}///  by  StatefulWidget  Component creation  State  class ///  Every  StatefulWidget  Need a matching  State  class class _AnimationAppState extends State<AnimationApp>    with SingleTickerProviderStateMixin{ 
      ///  Animation class   Animation<double> animation;  ///  Animation controller   AnimationController animationController;  @override  void initState() { 
        super.initState();    /// 1.  Initialize the animation controller     animationController = AnimationController(      //  When the animation is drawn outside the screen ,  Reduce consumption       vsync: this,      //  Animation duration  2  second       duration: Duration(seconds: 3),    );    /// 2 .  structure  Tween  Patch animation  ,    ///  Set up animation controller  AnimationController  Animate the room     ///  The animation value is the width and height of the square component     animation = Tween<double>(      begin: 0,      end: 300    ).animate(animationController);  }  ///  The method and  initState  Corresponding   @override  void dispose() { 
        ///  Release the animation controller     animationController.dispose();    super.dispose();  }  @override  Widget build(BuildContext context) { 
        return      Column(        children: [          Container(height: 50,),          GestureDetector(            // 5 .  Click the button to start the animation             onTap: (){ 
                  ///  Button click event               ///  First initialize the animation               animationController.reset();              ///  Executing animation forward ,  That is, from the initial value to the end value               animationController.forward();            },            child: Container(              alignment: Alignment.center,              color: Colors.green,              height: 50,              child: Text(                //  Show text                 " Animation start ",                ///  Text direction  :  From left to right                 textDirection: TextDirection.ltr,              ),            ),          ),          Container(height: 50,),          AnimationTransition(animation: animation, child: AnimationWidget())        ],      );  }}

Running effect : Animation values cannot be updated ;

7、 ... and 、 Related resources

---

Reference material :

• Flutter Official website : https://flutter.dev/
• Flutter Plug in download address : https://pub.dev/packages
• Flutter Developing documents : https://flutter.cn/docs ( Strongly recommend )
• official GitHub Address : https://github.com/flutter
• Flutter The Chinese community : https://flutter.cn/
• Flutter Practical tutorial : https://flutter.cn/docs/cookbook
• Flutter CodeLab : https://codelabs.flutter-io.cn/
• Dart Chinese document : https://dart.cn/
• Dart Developer website : https://api.dart.dev/
• Flutter Chinese net : https://flutterchina.club/ , http://flutter.axuer.com/docs/
• Flutter Related issues : https://flutterchina.club/faq/ ( It is recommended to watch it at the introductory stage )
• GitHub Upper Flutter Open source examples : https://download.csdn.net/download/han1202012/15989510
• Flutter Practical e-books : https://book.flutterchina.club/chapter1/

Important topics :

• Flutter Animation reference documentation : https://flutterchina.club/animations/

Blog source download :

• GitHub Address : https://github.com/han1202012/flutter_animation ( Keep updating with the progress of the blog , There may not be the source code of this blog )

• Blog source snapshot : https://download.csdn.net/download/han1202012/16188742 ( The source code snapshot of this blog , You can find the source code of this blog )