文章目录
  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. 自定义曲线