Flutter自定义路由切换动画

封面图 • 2025-11-05 • Flutter

在 Flutter 中，你可以通过自定义路由切换动画来提升用户体验。Flutter 提供了 `PageRoute` 和 `TransitionBuilder` 来实现自定义的路由过渡动画。

下面是一个完整的示例，展示如何在 Flutter 中实现 **自定义路由切换动画**（例如：从右向左滑动进入、从左向右滑动退出）。

---

## ✅ 1. 创建自定义路由类

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

class CustomPageRoute<T> extends PageRouteBuilder<T> {
  final Widget page;

CustomPageRoute({required this.page})
      : super(
          pageBuilder: (context, animation, secondaryAnimation) => page,
          transitionsBuilder: (context, animation, secondaryAnimation, child) {
            // 定义动画效果
            return SlideTransition(
              position: Tween<Offset>(
                begin: const Offset(1.0, 0.0),
                end: Offset.zero,
              ).animate(animation),
            );
          },
        );
}
```

- `SlideTransition` 是 Flutter 内置的动画组件。
- `begin: const Offset(1.0, 0.0)` 表示页面从右侧滑入。
- `end: Offset.zero` 表示滑到原位。

---

## ✅ 2. 使用自定义路由跳转页面

在你的主页面中使用 `Navigator.push` 方法：

```dart
void _navigateToNextPage(BuildContext context) {
  Navigator.push(
    context,
    CustomPageRoute(
      page: NextPage(),
    ),
  );
}
```

---

## ✅ 3. 返回时的动画（可选）

如果你希望返回时也有动画，可以修改 `transitionsBuilder`，或者使用 `PageRoute` 的 `reverseTransition` 属性：

```dart
class CustomPageRoute<T> extends PageRouteBuilder<T> {
  final Widget page;

CustomPageRoute({required this.page})
      : super(
          pageBuilder: (context, animation, secondaryAnimation) => page,
          transitionsBuilder: (context, animation, secondaryAnimation, child) {
            return SlideTransition(
              position: Tween<Offset>(
                begin: const Offset(1.0, 0.0),
                end: Offset.zero,
              ).animate(animation),
            );
          },
          reverseTransition: const FadeTransition(), // 或者自定义返回动画
        );
}
```

---

## ✅ 4. 自定义更复杂的动画（如旋转、缩放等）

你可以使用 `AnimatedWidget` 或 `AnimationController` 来创建更复杂的动画。

### 示例：缩放 + 滑动动画

```dart
transitionsBuilder: (context, animation, secondaryAnimation, child) {
  return FadeTransition(
    opacity: animation,
    child: ScaleTransition(
      scale: animation,
      child: child,
    ),
  );
}
```

---

## ✅ 5. 使用 `PageRouteBuilder` 实现其他动画

你也可以直接使用 `PageRouteBuilder` 来构建动画：

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

---

## 🧠 小贴士

| 动画类型 | 对应组件 |
|----------|-----------|
| 滑动     | `SlideTransition` |
| 缩放     | `ScaleTransition` |
| 旋转     | `RotationTransition` |
| 渐变     | `FadeTransition` |

---

## ✅ 总结

要实现 Flutter 自定义路由切换动画，核心是使用 `PageRouteBuilder` 并通过 `transitionsBuilder` 设置动画逻辑。你可以使用内置的 `SlideTransition`、`FadeTransition` 等组件，也可以结合 `AnimationController` 实现更复杂的动画效果。

如果你有特定的动画需求（比如从底部弹出、淡入淡出等），欢迎告诉我，我可以为你定制代码！