Flutter 动画基础

Flutter中的动画系统基于Animation对象的，widget可以在build函数中读取Animation对象的当前值， 可以监听动画的状态改变。

flutter动画实现基于AnimationController对象。所以要先定义:

AnimationController controller =new AnimationController(duration: const Duration(milliseconds: 2000), vsync: this);

其中vsync:this是一个TickerProvider对象，定义了可以发送Ticker对象的接口，它的主要作用是获取每一帧刷新的通知，相当于给动画添加了一个动起来的引擎。一般实现(with)SingleTickerProviderStateMixin即可。
定义动画使用，这里用：CurvedAnimation来实现

final CurvedAnimation curve = CurvedAnimation(parent: controller, curve: Curves.easeIn);

第一个对象controller传入定义的controller即可
第二个对象curve 表示动画曲线函数，类似 Android 动画的插值器。有一些内置曲线.（一般没有特殊需求不用传）.

class _Linear extends Curve {
  const _Linear._();

  @override
  double transform(double t) => t;
}
//使用
static const Curve linear = _Linear._();

好了，了解上面的之后开始在实际中使用动画：
1.声明对象一般在==initState()方法中,要在监听事件中添加setState((){})==方法不然没法执行。

 AnimationController controller;
  CurvedAnimation curve;
  @override
  void initState() {
    controller = new AnimationController(
        duration: const Duration(milliseconds: 2000), vsync: this);
    curve = CurvedAnimation(parent: controller, curve: Curves.fastOutSlowIn);
    animation.addListener((){
      setState(() {
      });
      Log.i("minePage execute addListener");
    });
    super.initState();
  }

2.声明之后就可以愉快的使用了.

缩放动画

 new Container(
         child: new Transform.scale(
         scale: curve.value ,
         child:  new FlutterLogo(size: 100,),
 ),
 )                

旋转动画

 new Container(
         child: new Transform.rotate(
         angle: curve.value * 3,
         child:  new FlutterLogo(size: 100,),
   ),
 ),

平移动画

 new Container(
          child: new Transform.translate(
          		offset:Offset (100.0 * curve.value,0.0),
          child: new FlutterLogo(size: 100,)),
) ,

渐变动画 (注意这里是FadeTransition)

 new Container(
         child: new FadeTransition(
         opacity: controller,
         child:  new FlutterTestLogo(),
      ),
 ),

3.最后一步，调用

controller.forward() //或者 controller.reverse();

通过以上代码，我们可以完成一个基本的动画效果。git链接