Flutter中动画的实现

       动画三要素

        控制动画的三要素：Animation、Tween、和AnmaitionController

        Animation： 产生的值的序列，有CurveAnimation等子类，， 可以将值赋值给Widget的宽高或其他属性，进而控制widget发生变化

        Tween：可以定义值的变化范围，  继承自Animatable<T>，每个类都有begin和end两个属性，同时有CurveTween等子类，可以定义值在begin和end间的变化方式。

        AnimationController： 动画的控制器，可以设置动画的时长，控制动画开始或者结束等

        有两种方式生成Animation：

      （1）_controller.drive(_curveTween)

      （2）_curveTween.animate(_controller)     

       

        Widget动画相关属性

        （1）Container的width、height， 控制Widget大小

        （2）SlideTransition 的position， 通过Tween<Offset>控制Widget的位移

        （3） Align的heightFactor， 控制Widget的展开或收起

        （4） AnimatedOpacity的opacity属性，控制Widget的渐隐渐显

        两种动画实现方式

         Flutter中动画主要有两种实现方式，即通过addListener监听Animation的值的变化， 或者用AnimationBuilder来构建参与动画的Widget。

        下面看一个通过addListener实现动画的例子

//动画控制器
final AnimationController controller = new AnimationController(duration: const Duration(milliseconds: 500), vsync: this);
//创建一个值的序列，其变化方式为Curve中的淡出效果
final Animation curve =new CurvedAnimation(parent: controller, curve: Curves.easeOut);
//通过tween指定值的变化范围为0～255
Animation<int> animation = new IntTween(begin: 0, end: 255).animate(curve);
//监听动画状态的变化： 动画是否结束
..addStatusListener((status) {if (status == AnimationStatus.completed) {controller.reverse();} else if (status == AnimationStatus.dismissed) {controller.forward();}})
//监听Animation的值的变化，更新UI
..addListener(() {setState(() {// 将animation.value赋值给指定的Widget的属性_opacity = animation.value.toDouble() / 255;});      });//动画开始    
controller.forward();

        再看下如何通过AnimationBuilder构建动画：

Widget build(BuildContext context) => Center(child: AnimatedBuilder(animation: animation,builder: (context, child) => Container(height: animation.value,width: animation.value,child: child,),child: child),);
}

        不难看出，使用AnimationBuilder来实现动画效果，代码要简洁的多，是更为推荐的实现方式。