自己学习一下flutter的动画

flutter动画 有两种实现方式 一种是自己 创建Animation 来实现动画

animationController 看名字就知道 动画控制器 duration中Seconds 是用来控制动画显示时间,vsyns 是flutter为了减少界面在看不到的地方减少内存输出.可以传入state本身,但是要 实现 SingleTickerProviderStateMixin

curve 是flutter官方为我们提供的一种曲线.

Tween 是动画实现效果 begin 和end 自己可以定义很多属性.

下面就是一种简单的动画实现方式

_animationController = AnimationController(duration: Duration(seconds: 3),vsync: this);
animation = CurvedAnimation(parent: _animationController, curve: Curves.easeInBack);

animationSize = Tween<double>(begin: 0, end: 300).animate(_animationController)
  ..addListener(() {
    // #enddocregion addListener
    setState(() {
      animationValue = animation.value;
    });
    // #docregion addListener
  })
  ..addStatusListener((AnimationStatus state) {
    setState(() {
      animationState = state;
    });
  });

忘记说怎么实现了 可以在点击事件中 setstate()是用来通知flutter重绘页面的 reset 重制动画, forward开始动画.

onPressed: (){

  setState(() {
            _animationController.reset();
              _animationController.forward();
          });
        },