知识点概况

Animation子系统是Flutter Framework层的动画管理核心，负责协调所有动画效果。通过AnimationController、Curve和Tween的配合，实现了流畅的60 FPS动画体验。

核心概念速览

概念	一句话说明
AnimationController	动画控制器，管理动画生命周期
Animation	动画值，从0.0到1.0变化
Curve	缓动函数，控制动画速度
Tween	插值器，在两个值之间过渡
AnimatedWidget	自动监听动画的Widget

---

一、Animation子系统架构

Animation子系统是Flutter动画的基础设施。

1.1 Animation子系统组成图

Animation子系统
    ↓
├── AnimationController (控制器)
│   ├── vsync - 心跳同步
│   ├── duration - 动画时长
│   ├── value - 动画值
│   └── status - 动画状态
│
├── Animation (动画值)
│   ├── Animation<double> - 数值动画
│   ├── Animation<Color> - 颜色动画
│   └── Animation<Size> - 尺寸动画
│
├── Curve (缓动函数)
│   ├── linear - 线性
│   ├── easeInOut - 缓入缓出
│   ├── bounceIn - 弹跳
│   └── elasticOut - 弹性
│
├── Tween (插值器)
│   ├── Tween<T> - 通用插值
│   ├── ColorTween - 颜色插值
│   ├── IntTween - 整数插值
│   └── SizeTween - 尺寸插值
│
└── AnimatedWidget (动画Widget)
    ├── AnimatedContainer
    ├── AnimatedOpacity
    ├── AnimatedPadding
    └── AnimatedRotation

1.2 Animation核心职责表

|| 组件 | 职责 | 主要方法 | 用途 |
|--------|------|----------|------|
| AnimationController | 控制动画 | forward(), reverse(), repeat() | 启动、停止、重复 |
| Animation | 提供值 | addListener(), removeListener() | 监听动画值 |
| Curve | 控制速度 | transform() | 改变动画节奏 |
| Tween | 数值插值 | transform() | 在值之间过渡 |

---

二、AnimationController详解

AnimationController是动画的核心控制器。

2.1 AnimationController参数表

|| 参数 | 类型 | 说明 | 默认值 |
|------|------|------|--------|
| vsync | TickerProvider | 心跳同步 | 必需 |
| duration | Duration | 动画时长 | null |
| reverseDuration | Duration | 反向时长 | null |
| lowerBound | double | 下界 | 0.0 |
| upperBound | double | 上界 | 1.0 |

2.2 AnimationController生命周期图

创建AnimationController
  ↓
┌─────────────────────────────────────┐
│  初始化阶段                       │
│  - vsync: 提供心跳               │
│  - duration: 设置时长              │
│  - value: 初始值(0.0)           │
└──────────────┬──────────────────────┘
               ↓
┌─────────────────────────────────────┐
│  启动动画                         │
│  - forward(): 从0到1             │
│  - reverse(): 从1到0             │
│  - repeat(): 循环播放             │
└──────────────┬──────────────────────┘
               ↓
┌─────────────────────────────────────┐
│  动画执行中                       │
│  - value从0.0变化到1.0         │
│  - 每帧触发onUpdate回调          │
│  - 通知监听器                    │
└──────────────┬──────────────────────┘
               ↓
┌─────────────────────────────────────┐
│  动画完成                         │
│  - value到达1.0或0.0          │
│  - 触发onComplete回调           │
│  - 可以重置或停止               │
└──────────────┬──────────────────────┘
               ↓
┌─────────────────────────────────────┐
│  销毁控制器                       │
│  - dispose()释放资源             │
└─────────────────────────────────────┘

2.3 AnimationController核心方法

// 创建控制器
AnimationController(
  duration: const Duration(seconds: 2),
  vsync: this,
);

// 前向播放
_controller.forward();

// 反向播放
_controller.reverse();

// 循环播放
_controller.repeat();

// 停止动画
_controller.stop();

// 重置动画
_controller.reset();

---

三、Animation值类型

Animation提供多种类型的动画值。

3.1 Animation类型对比表

|| 类型 | 值范围 | 用途 | 示例 |
|------|--------|------|------|
| Animation | 0.0-1.0 | 通用动画 | 缩放、旋转 |
| Animation | 颜色 | 颜色渐变 | 背景色切换 |
| Animation | 整数 | 离散值 | 页码切换 |
| Animation | 尺寸 | 大小变化 | 容器缩放 |
| Animation | 偏移 | 位置变化 | 移动动画 |

3.2 Animation监听示例

// 添加监听器
_animation.addListener(() {
  print('动画值: ${_animation.value}');
});

// 移除监听器
_animation.removeListener(listener);

// 状态监听
_animation.addStatusListener((status) {
  switch (status) {
    case AnimationStatus.forward:
      print('向前播放');
      break;
    case AnimationStatus.reverse:
      print('反向播放');
      break;
    case AnimationStatus.completed:
      print('完成');
      break;
    case AnimationStatus.dismissed:
      print('取消');
      break;
  }
});

---

四、Curve缓动函数

Curve控制动画的速度曲线。

4.1 常用Curve类型表

|| Curve | 效果 | 适用场景 |
|--------|------|----------|
| linear | 线性匀速 | 加载条 |
| easeInOut | 缓入缓出 | 通用动画 |
| bounceIn | 弹跳效果 | 入场动画 |
| elasticOut | 弹性效果 | 点击反馈 |
| decelerate | 减速 | 出场动画 |

4.2 Curve效果对比

linear (线性)
  ↓
┌───────────────────────┐
│  ───────────────     │  匀速
└───────────────────────┘

easeInOut (缓入缓出)
  ↓
┌───────────────────────┐
│         ╱╲         │  先加速后减速
└───────────────────────┘

bounceIn (弹跳)
  ↓
┌───────────────────────┐
│    ───╱╲───       │  到达后弹跳
└───────────────────────┘

elasticOut (弹性)
  ↓
┌───────────────────────┐
│  ╱──╲──╱──╲──     │  振荡衰减
└───────────────────────┘

4.3 Curve使用示例

// 应用Curve
Animation<double> _animation = CurvedAnimation(
  parent: _controller,
  curve: Curves.easeInOut,
);

// 自定义Curve
class CustomCurve extends Curve {
  @override
  double transform(double t) {
    return t * t;  // 加速曲线
  }
}

// 使用自定义Curve
Animation<double> _animation = CurvedAnimation(
  parent: _controller,
  curve: CustomCurve(),
);

---

五、Animation子系统示例

本示例展示Animation的基本使用。

5.1 示例功能

• Animation值实时显示
• AnimationController核心参数
• Curve缓动函数展示

5.2 核心代码

class AnimationExample extends StatefulWidget {
  @override
  State<AnimationExample> createState() => _AnimationExampleState();
}

class _AnimationExampleState extends State<AnimationExample>
    with SingleTickerProviderStateMixin {
  
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    
    // 创建控制器
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..repeat();  // 循环播放
    
    // 应用曲线
    _animation = CurvedAnimation(
      parent: _controller,
      curve: Curves.easeInOut,
    );
  }

  @override
  void dispose() {
    _controller.dispose();  // 释放资源
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animation,
      builder: (context, child) {
        return Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(16 * _animation.value),
          ),
        );
      },
    );
  }
}

---

六、总结

Animation子系统通过AnimationController、Curve和Tween的配合，实现了流畅的动画效果。

核心要点总结表

|| 概念 | 核心思想 | 关键收益 |
|------|----------|----------|
| AnimationController | 管理动画生命周期 | 控制动画播放 |
| Animation值 | 0.0到1.0变化 | 通用动画基础 |
| Curve曲线 | 控制动画速度 | 丰富动画效果 |
| Tween插值 | 值之间过渡 | 类型安全 |
| 60 FPS | VSync同步 | 流畅动画 |

Animation子系统学习路径

┌─────────────┐
│AnimationController│ → 掌握动画控制
└──────┬──────┘
       ↓
┌─────────────┐
│Animation值   │ → 理解值变化
└──────┬──────┘
       ↓
┌─────────────┐
│Curve缓动   │ → 控制动画节奏
└──────┬──────┘
       ↓
┌─────────────┐
│Tween插值    │ → 实现类型过渡
└──────┬──────┘
       ↓
┌─────────────┐
│AnimatedWidget│ → 简化动画实现
└─────────────┘

---

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net