Flutter学习之 动画核心

本文主要介绍下flutter中动画核心

1. Tween（映射）

AnimationController 之前设置的最小/大值类型是 double，如果动画的变化是颜色要如何处理？

AnimationController 在执行动画期间返回的值是 0 到 1，颜色从红色变为黑色方法如下：

class _AnimationPageState extends State<AnimationPage> with SingleTickerProviderStateMixin{
  late AnimationController _controller;
  final _startColor = Colors.black;
  final _endColor = Colors.red;

  Color? _color;
  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this, duration: Duration(milliseconds: 1000));
    _controller.addListener(() {
      setState(() {
        _color = Color.lerp(_startColor, _endColor, _controller.value);

      });
    });

  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('core'),),
      body: Center(
        child: ElevatedButton(
          onPressed: (){
            _controller.forward();
          },
          child: Icon(Icons.change_circle,color:_color ?? Colors.red ,size: 100,),

        ),
      ),
    );
  }
}

这里使用的是Color.lerp表示一个渐变色两个颜色之间的线性插值。

static Color? lerp(Color? a, Color? b, double t)

' t '参数表示时间轴上的位置，0表示0 插值还没有开始，返回' a '(或其他东西)相当于' a ')， 1.0意味着插值已经完成，返回' b '(或等于' b '的值)，以及介于两者之间的值表示插值在时间轴上的相关点。

Flutter 中把这种从 0 -> 1 转换为 蓝色 -> 红色 行为称之为 Tween（映射） 。

使用 Tween 完成动画

class _AnimationPageState extends State<AnimationPage> with SingleTickerProviderStateMixin{
  late AnimationController _controller;
  final _startColor = Colors.black;
  final _endColor = Colors.red;
  late Animation<Color?> _animation;


  Color? _color;
  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this, duration: Duration(milliseconds: 1000));
    _controller.addListener(() {
      setState(() {});

    });
    _animation = ColorTween(begin: Colors.black, end: Colors.red).animate(_controller);



  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('core'),),
      body: Center(
        child: ElevatedButton(
          onPressed: (){
            _controller.forward();
          },
          child: Icon(Icons.change_circle,color: _animation.value  ,size: 100,),

        ),
      ),
    );
  }
}

本质上也是使用 Color.lerp 实现的。

2. Curve（曲线）

Curve曲线简单的使用

class _CurveAnimationPageState extends State<CurveAnimationPage>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation _animation;

  @override
  void initState() {
    super.initState();
    _controller =
    AnimationController(vsync: this, duration: const Duration(milliseconds: 1000))
      ..addListener(() {
        setState(() {});
      });

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("core"),),
      body: Center(
          child: ElevatedButton(
            onPressed: (){
              _controller.forward();
            },
            child: Icon(Icons.add,size: _animation.value,),
          )),
    );
  }

  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }
}

大小 100 变大到 200，动画曲线设置为 bounceIn（弹簧效果）

动画效果中系统已经提供了几十种种常用到动画曲线：

我们使用linear

其余动画效果可以官方文档查看。 fastLinearToSlowEaseIn

我们也可以仿照系统进行自定义。