Flutter-浅谈动画插值器

配图来自网络，如侵必删

在日常的开发当中，我们会给一些组件添加动画来达到更好的视觉交互体验。动画插值器是动画实现的重要部分，这篇博客就来分享动画插值器相关的知识，希望对做动画的小伙伴有所启发。

插值器简述

插值器（tween）是为动画提供起始值和结束值的一个对象。

动画的本质

在Flutter中，动画的本质是从起始值到结束值的一个过渡过程。默认情况下：

起始值是double类型的0.0
结束值是double类型的1.0

简单定义插值器

tween = Tween<double>(begin: -200, end: 0);

颜色插值器定义

colorTween = ColorTween(begin: Colors.red, end: Colors.blue);

颜色插值器

class ColorTween extends Tween<Color?> {

  ColorTween({ Color? begin, Color? end }) : super(begin: begin, end: end);

  @override
  Color? lerp(double t) => Color.lerp(begin, end, t);
}

尺寸插值器

class SizeTween extends Tween<Size?> {

  SizeTween({ Size? begin, Size? end }) : super(begin: begin, end: end);

  @override
  Size? lerp(double t) => Size.lerp(begin, end, t);
}

对齐方式插值器

class AlignmentTween extends Tween<Alignment> {

  AlignmentTween({ Alignment? begin, Alignment? end })
    : super(begin: begin, end: end);

  @override
  Alignment lerp(double t) => Alignment.lerp(begin, end, t)!;
}