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链接
Flutter 动画基础_第1张图片

你可能感兴趣的:(flutter)