Flutter 动画之 AnimationController

Animation

Animation 抽象类，不直接使用，一般通过 AnimationController 来使用。Animation 主要是监听动画的状态，动画变化的值，主要有以下几种状态

enum AnimationStatus {
  dismissed,//一般动画结束值为 0.0 的时候调用。对应 reverse 操作
  forward,//开始动画操作，动画值逐渐变大的过程
  reverse,//动画反向从尾到头执行，动画值逐渐变小的过程
  completed,//一般动画结束值为 1.0 的时候调用，对应 forward 操作
}

AnimationController

动画控制器，动画值默认 0.0 到 1.0 的变化。可通过 lowerBound 和 upperBound 调整。

duration 动画的执行时长
debugLabel 调试标签
lowerBound 动画最小边界值且这个值小于 upperBound 的值，如果动画变化值小于这个值则为取消动画，不能为 null 。
upperBound 动画最大边界值且比 lowerBound 大，如果动画变化值大于这个值则动画状态为完成状态。不能为 null 。
_ticker 创建计时器，用于每帧的回调刷新作用。TickerProvider 作为抽象类，主要的子类有 SingleTickerProviderStateMixin 和 TickerProviderStateMixin 这两个类的区别就是 TickerProviderStateMixin 支持创建多个 TickerProvider 。

如下面例子

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin{
  AnimationController controller;
  Animation animation;
  @override
  initState() {
    super.initState();
    controller = AnimationController(
        duration: const Duration(milliseconds: 2000), vsync: this);
    controller.addListener((){
      print("controller=====${controller.value}");
      if(controller.value > 0.5){
        controller.animateBack(0.0);
      }
    });
    controller.addStatusListener((status){
      print("status====$status");
    });
    controller.forward();
  }
 @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(title: const Text('首页')),
        body: Center(
          child: Container(
          ),
        )
    );
  }

  @override
  Ticker createTicker(onTick) {
    return new Ticker(onTick, debugLabel: 'created by $this');
  }
}

它的动画状态改变为

I/flutter (20675): status====AnimationStatus.forward
I/flutter (20675): controller=====0.0
//省略部分....
I/flutter (20675): controller=====0.5011835
I/flutter (20675): status====AnimationStatus.reverse
I/flutter (20675): controller=====0.4928305
//省略部分....
I/flutter (20675): controller=====0.0
I/flutter (20675): status====AnimationStatus.dismissed

如果在 listener 里面不调用 animateBack 。最后执行则会是

I/flutter (20675): status====AnimationStatus.forward
I/flutter (20675): controller=====0.0
//省略部分....
I/flutter (20675): controller=====1.0
I/flutter (20675): status====AnimationStatus.completed

动画操作

开始执行动画

controller.forward();

反向执行动画

controller.reverse();

指定对应的目标值反向执行

animateBack(0.0)

指定对应的目标值让动画结束，此时最后调用的状态是 AnimationStatus.completed

animateTo(0.8)

停止动画

controller.stop();

重置动画

controller.reset();

重复执行动画

controller.repeat();

最后编辑于：2019.09.26 09:53:52