Flutter 动画过渡组件

封面图 • 2025-11-09 • Flutter

在 Flutter 中，**动画过渡组件（Animation Transitions）** 是用于实现页面或组件之间平滑切换效果的重要工具。Flutter 提供了多种方式来实现动画过渡，包括使用 `AnimatedWidget`、`Hero`、`PageRouteBuilder`、`Transition` 等。

下面是一些常用的 Flutter 动画过渡组件和它们的使用方式：

---

## 一、基本动画组件

### 1. **AnimatedWidget**

这是 Flutter 中最基础的动画组件之一，它可以根据状态变化自动重新构建。

```dart
class MyAnimatedWidget extends AnimatedWidget {
  MyAnimatedWidget({Key? key, required Animation<double> animation})
      : super(key: key, listenable: animation);

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

使用示例：

```dart
final AnimationController controller = AnimationController(
  duration: const Duration(seconds: 2),
  vsync: this,
);
final Animation<double> animation = CurvedAnimation(parent: controller, curve: Curves.easeIn);

@override
void initState() {
  super.initState();
  controller.forward();
}

@override
Widget build(BuildContext context) {
  return MyAnimatedWidget(animation: animation);
}
```

---

## 二、页面过渡动画（Page Transition）

### 1. **PageRouteBuilder**

通过自定义 `PageRouteBuilder` 实现页面之间的动画过渡。

```dart
Navigator.push(
  context,
  PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => SecondPage(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      return FadeTransition(
        opacity: animation,
        child: child,
      );
    },
  ),
);
```

### 2. **SlideTransition / FadeTransition / RotationTransition**

这些是内置的动画组件，可以结合 `PageRouteBuilder` 使用。

```dart
transitionsBuilder: (context, animation, secondaryAnimation, child) {
  return SlideTransition(
    position: Tween<Offset>(
      begin: const Offset(1, 0),
      end: Offset.zero,
    ).animate(animation),
    child: child,
  );
}
```

---

## 三、Hero 动画（跨页面共享动画）

`Hero` 组件用于在两个页面之间实现“共享”动画，比如图片、按钮等元素的过渡。

### 示例：

**Page 1:**

```dart
Hero(
  tag: 'hero-tag',
  child: Image.network('https://example.com/image.jpg'),
)
```

**Page 2:**

```dart
Hero(
  tag: 'hero-tag',
  child: Image.network('https://example.com/image.jpg'),
)
```

当从 Page 1 跳转到 Page 2 时，图片会以动画形式过渡。

---

## 四、Transition 组件（第三方库）

如果你想要更高级的过渡效果，可以使用一些第三方库，例如：

### 1. **flutter_transition**

```yaml
dependencies:
  flutter_transition: ^1.0.0
```

使用示例：

```dart
Transition(
  child: YourWidget(),
  transitionType: TransitionType.fade,
  duration: const Duration(milliseconds: 300),
)
```

### 2. **animated_switcher**

Flutter 内置的 `AnimatedSwitcher` 可以在多个子组件之间进行动画切换。

```dart
AnimatedSwitcher(
  duration: const Duration(milliseconds: 300),
  child: _currentScreen,
)
```

---

## 五、常用动画曲线（Curve）

- `Curves.linear`
- `Curves.ease`
- `Curves.easeIn`
- `Curves.easeOut`
- `Curves.easeInOut`
- `Curves.bounceIn`
- `Curves.elasticIn`

---

## 六、总结：常用动画组件列表

| 组件/类 | 用途 |
|--------|------|
| `AnimatedWidget` | 基础动画组件 |
| `AnimationController` | 控制动画播放 |
| `CurvedAnimation` | 动画曲线控制 |
| `PageRouteBuilder` | 自定义页面过渡动画 |
| `FadeTransition` | 淡入淡出动画 |
| `SlideTransition` | 水平/垂直滑动动画 |
| `RotationTransition` | 旋转动画 |
| `Hero` | 页面间共享动画 |
| `AnimatedSwitcher` | 多个组件间的动画切换 |
| `flutter_transition` | 第三方动画库 |

---

如果你想了解某个具体组件的详细用法，比如 `Hero` 或 `PageRouteBuilder` 的进阶用法，我可以继续为你详细讲解！