Flutter相关

Flutter 动画之 AnimationController

2019-09-26  本文已影响0人  Goach

Animation

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

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

AnimationController

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

如下面例子

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();
上一篇下一篇

猜你喜欢

热点阅读