Flutter的动画机制及相关类

动画机制

Flutter动画的本质是在一段时间内让某个值按照一定曲线从初始状态变化到目标状态，并在每一帧重绘UI。

工作流程可以简单拆成这几步：

1. 时间驱动

• Flutter依靠引擎的 Ticker（类似时钟），每帧（默认60FPS，某些设备120FPS）回调一次时间。
• Ticker会告诉动画运行了多久（elapsed time）。

2. 插值计算

• AnimationController会根据时间计算当前动画进度（0.0 ~ 1.0）。
• Tween（补间器）会根据进度计算实际的值，比如从0 → 300像素。

3. 曲线映射

• CurvedAnimation会把线性进度映射成各种非线性曲线（如缓入、缓出、弹性）。

4. UI 重建/重绘

• 动画每一帧都会通知监听者（addListener 或 AnimatedBuilder）。
• 触发 Widget 重建或 RenderObject 重绘，实现流畅动画效果。

简化公式：

动画值 = Tween(起始值, 结束值).transform(曲线(时间进度))

核心类

1. 时间驱动类（Ticker 系列）

• Ticker

  • 最底层的时间回调，每帧调用一个函数，参数是从开始到当前的时间。

• TickerProvider

  • Ticker 的工厂，常见实现：

    • SingleTickerProviderStateMixin（单动画控制器用）
    • TickerProviderStateMixin（多个动画控制器用）

• TickerFuture

  • 表示 Ticker 的一次启动任务，可以 await。

---

2. 动画值控制类（AnimationController）

• AnimationController

  • 核心控制器，负责：

    • 管理动画时长、方向（forward / reverse）
    • 计算动画进度（0.0 ~ 1.0）
    • 控制开始、停止、重复

  • 它本身是一个 Animation<double>（0 到 1 的线性值）

• 常用方法：

  • forward() → 正向播放
  • reverse() → 反向播放
  • repeat() → 循环播放
  • reset() → 重置到起点

• 常用属性：

  • value → 当前动画进度值
  • status → 当前状态（forwarding, completed, reversing, dismissed）

---

3. 值映射类（Tween 系列）

• Tween<T>

  • 负责把 0.0~1.0 的进度转换为实际类型 T 的值

  • 常见子类：

    • Tween<double> → 数字插值
    • ColorTween → 颜色插值
    • RectTween → 矩形插值
    • SizeTween → 尺寸插值

• 用法：

final tween = Tween(begin: 0.0, end: 300.0);
final value = tween.evaluate(animation); // 进度映射到实际值

---

4. 曲线映射类（Curves 系列）

• CurvedAnimation

  • 接收一个线性 Animation（如 AnimationController），再套用曲线函数。

  • 曲线定义在 Curves 类里：

    • Curves.linear（匀速）
    • Curves.easeIn（缓入）
    • Curves.easeOut（缓出）
    • Curves.elasticOut（弹性）

• 用法：

final curved = CurvedAnimation(
  parent: controller,
  curve: Curves.easeInOut,
);

---

5. UI 绑定类（Widget 系列）

• AnimatedBuilder

  • 用于监听动画并重建 UI，性能优于直接 setState，因为可以只重建局部子树。

• AnimatedWidget

  • 帮你封装了动画监听的 Widget 基类，自己继承它就能少写 addListener。

• 隐式动画ImplicitlyAnimatedWidget

  • 比如 AnimatedContainer, AnimatedOpacity，不需要显式创建 AnimationController，内部自动管理。

---

总结

1. 显式动画（Explicit Animation）

   • 手动创建 AnimationController
   • 灵活性高（可以控制方向、速度、状态监听）
   • 例子：AnimationController + Tween + AnimatedBuilder

2. 隐式动画（Implicit Animation）

   • 只要改属性，动画自动运行
   • 简单但灵活性差
   • 例子：AnimatedOpacity, AnimatedAlign

3. 物理动画（Physics-based Animation）

   • 基于物理模型（弹簧、重力等）
   • 例子：SpringSimulation, BouncingScrollSimulation