Flutter中Animation与Animatable的区别是什么？文档内容存困惑

1. 核心定位不一样 #

• Animation：是个动态的值流，代表动画当前的实时状态，会跟着时间自动更新数值，还能监听变化触发UI重绘。说白了就是动画的"动态数据源"。
• Animatable：是个静态的值转换器，本身不存动态变化的状态，只定义了怎么把一个输入值（一般是0.0到1.0的动画进度）转换成目标类型的值（比如颜色、尺寸、偏移量）。它是一套转换规则，得结合Animation的动态进度才能生成实际的动画值。

2. 各自的核心能力 #

• Animation：
  • 自带时间驱动的数值变化逻辑，比如用AnimationController就能控制动画的启动、暂停、倒放
  • 可以加监听器(addListener)和状态监听器(addStatusListener)，随时知道动画的进度和状态变化
  • 最基础的Animation<double>是多数动画的底层进度源，输出0.0到1.0的线性/非线性变化值
• Animatable：
  • 只管"值的映射"，比如ColorTween就定义了从起始色到结束色的渐变规则，SizeTween定义尺寸变化规则
  • 自己没法独立驱动动画，必须通过animate()方法绑定一个Animation，把Animation的进度值转换成目标类型的动画值
  • 除了各种Tween，CurveTween也是典型的Animatable，用来给动画进度加曲线效果（比如加速、减速）

3. 结合文档示例理解 #

A Tween inherits from Animatable, not from Animation. An Animatable, like Animation, doesn’t have to output double. For example, ColorTween specifies a progression between two colors.

这段文档的意思拆解：

• ColorTween属于Animatable，它自己不会动，只是定义了红色到蓝色的渐变规则
• 要让它变成动态动画，得绑定一个Animation<double>（比如AnimationController生成的进度流）：

// 1. 创建控制器，生成0.0-1.0的动态进度流（Animation<double>）
final controller = AnimationController(duration: const Duration(seconds: 2), vsync: this);
// 2. 创建ColorTween（Animatable），定义颜色转换规则
final colorTween = ColorTween(begin: Colors.red, end: Colors.blue);
// 3. 绑定Animation，得到能输出颜色的Animation<Color>
final colorAnimation = colorTween.animate(controller);

这里的colorAnimation就是一个Animation<Color>，它会跟着controller的驱动，不断把0.0-1.0的进度转换成对应的中间色——这就是两者配合完成动画的方式。

内容的提问来源于stack exchange，提问作者Alireza Salehi