Flutter动画简介

封面图 • 2025-10-11 • Flutter

Flutter 动画是 Flutter 框架中用于实现界面动态效果的重要功能，它能够让你在应用中创建平滑、流畅的动画效果，提升用户体验。Flutter 提供了多种动画相关的类和工具，使得开发者可以轻松地实现从简单的属性变化到复杂的自定义动画。

---

## 一、Flutter 动画的基本概念

### 1. **Animation（动画）**
- `Animation` 是一个抽象类，表示动画的值。
- 它包含当前的值（value）、状态（status）、持续时间（duration）等信息。
- 常见的子类有：
  - `AnimationController`：控制动画的播放、暂停、反转等。
  - `Tween`：定义动画的起始值和结束值之间的插值。
  - `CurvedAnimation`：为动画添加曲线效果（如加速、减速）。

### 2. **AnimationController**
- 控制动画的播放、暂停、停止、反转等。
- 需要与 `TickerProvider`（通常是 `StatefulWidget`）配合使用。
- 示例：
  ```dart
  final AnimationController _controller = AnimationController(
    duration: const Duration(seconds: 2),
    vsync: this,
  );
  ```

### 3. **Tween**
- 定义动画的起始值和结束值。
- 例如，将一个 `double` 值从 0 到 100 变化：
  ```dart
  final Animation<double> _animation = Tween<double>(begin: 0, end: 100)
      .animate(_controller);
  ```

### 4. **CurvedAnimation**
- 给动画添加曲线（如 `Curves.easeIn`, `Curves.bounceOut` 等）。
- 示例：
  ```dart
  final Animation<double> _curvedAnimation = CurvedAnimation(
    parent: _controller,
    curve: Curves.easeIn,
  );
  ```

---

## 二、常见的动画类型

### 1. **Simple Animation（简单动画）**
- 使用 `AnimationController` 和 `Tween` 实现基本的属性变化。
- 例如：改变颜色、位置、大小等。

### 2. **AnimatedWidget（动画小部件）**
- 自动监听动画的变化并更新 UI。
- 例如：`AnimatedOpacity`、`AnimatedContainer`、`AnimatedCrossFade` 等。

### 3. **Hero Animation（英雄动画）**
- 用于在两个页面之间实现“飞入飞出”的过渡动画。
- 常用于图片或卡片的切换。
- 示例：
  ```dart
  Hero(
    tag: 'hero',
    child: Image.asset('assets/image.jpg'),
  )
  ```

### 4. **PageRoute Transitions（页面转场动画）**
- 可以自定义页面切换时的动画效果。
- 例如：淡入、滑动、缩放等。

### 5. **Custom Animations（自定义动画）**
- 使用 `Animation` + `CustomPainter` 实现复杂的自定义动画。
- 适用于绘制路径、形状变化等。

---

## 三、动画生命周期

| 方法 | 说明 |
|------|------|
| `forward()` | 从开始到结束播放动画 |
| `reverse()` | 从结束到开始播放动画 |
| `stop()` | 停止动画 |
| `reset()` | 将动画重置为初始状态 |
| `addListener()` | 添加监听器，当动画值变化时触发 |

---

## 四、示例代码：一个简单的动画

```dart
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Flutter 动画示例")),
        body: Center(child: MyAnimatedWidget()),
      ),
    );
  }
}

class MyAnimatedWidget extends StatefulWidget {
  @override
  _MyAnimatedWidgetState createState() => _MyAnimatedWidgetState();
}

class _MyAnimatedWidgetState extends State<MyAnimatedWidget>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

@override
  void initState() {
    super.initState();

_controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    );

_animation = Tween<double>(begin: 0, end: 300).animate(_controller);

_controller.forward();
  }

@override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

@override
  Widget build(BuildContext context) {
    return Container(
      width: _animation.value,
      height: _animation.value,
      color: Colors.blue,
    );
  }
}
```

---

## 五、总结

| 类型 | 描述 |
|------|------|
| `AnimationController` | 控制动画的播放 |
| `Tween` | 定义动画的起始和结束值 |
| `CurvedAnimation` | 为动画添加曲线 |
| `AnimatedWidget` | 自动更新 UI 的动画组件 |
| `Hero` | 页面间过渡动画 |
| `PageRoute` | 页面切换动画 |

Flutter 的动画系统非常强大，结合 `Animation`、`Tween`、`CurvedAnimation` 和 `AnimatedWidget`，你可以创建出丰富而流畅的动画效果。如果你正在开发一个需要视觉吸引力的应用，掌握这些动画知识是非常有帮助的。