By

文章目录
  1. 1. AnimationController
    1. 1.1. Tween
    2. 1.2. Curve
    3. 1.3. 自定义曲线

AnimationController

1
AnimationController(vsync:this, duration: Duration(milliseconds: 5000));
  • vsync 防止屏幕外动画消耗不必要的资源 单个AnimationController使用SingleTickerProviderStateMixin，多个AnimationController使用TickerProviderStateMixin

  • duration 动画执行的时间

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    class _AnimationBaseDemoState extends State<AnimationBaseDemo> with SingleTickerProviderStateMixin {
     double _size = 100;
      AnimationController _controller;
      @override
      void initState() {
        super.initState();
        _controller = AnimationController(vsync: this,duration: Duration(milliseconds: 500),lowerBound: 100,upperBound: 200)
        ..addListener(() {
          setState(() {
            _size = _controller.value;
          });
        })
      }

      @override
      Widget build(BuildContext context) {
        return Center(
          child: GestureDetector(
            onTap: () {
              _controller.forward();
            },
            child: Container(
              height: _size,
              width: _size,
              color: Colors.blue,
              alignment: Alignment.center,
              child: Text('点我变大',style: TextStyle(color: Colors.white,fontSize: 18),),
            ),
          ),
        );
      }
      
      @override
      void dispose() {
        super.dispose();
        _controller.dispose();
      }
    }

  • dismissed 动画停止在开始处

  • forward 动画从开始处运行到结束处
  • reverse 动画充结束处运行到开始处
  • completed 动画结束在借书处
  • repeat 重复执行动画
  • reset 重置动画

    Tween

    动画映射
    1
    2
    3
    4
    5
    6
    7
    8
    9
    AnimationController _controller;
    Animation<Color> _animation;

    @override
    void initState() {
      super.initState();
        _controller = AnimationController(vsync: this, duration: Duration(milliseconds: 500));
        _animation = ColorTween(begin: Colors.blue, end: Colors.red).animate(_controller);
    }

Curve

动画曲线

1
2
3
4
5
6
7
8
9
10
11
super.initState();
   _controller =
       AnimationController(vsync: this, duration: Duration(milliseconds: 1000))
         ..addListener(() {
           setState(() {});
         });

   _animation = Tween(begin: 100.0, end: 200.0)
       .chain(CurveTween(curve: Curves.bounceIn))
       .animate(_controller);
 }

自定义曲线

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
class _StairsCurve extends Curve {
  final int num;
  double _perStairY;
  double _perStairX;

  _StairsCurve(this.num) {
    _perStairY = 1.0 / (num - 1);
    _perStairX = 1.0 / num;
  }

  @override
  double transformInternal(double t) {
    return _perStairY * (t / _perStairX).floor();
  }
}
文章目录
  1. 1. AnimationController
    1. 1.1. Tween
    2. 1.2. Curve
    3. 1.3. 自定义曲线