Flutter学习之动画核心-六虎

携手创造，一起成长！这是我参加「日新方案 · 8 月更文应战」的第28天，点击检查活动概况

本文首要介绍下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,),
        ),
      ),
    );
  }
}

iShot_2022-08-27_20.23.47.gif

这里运用的是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,),
        ),
      ),
    );
  }
}

iShot_2022-08-27_20.58.46.gif

本质上也是运用 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();
  }
}