Flutter 路由动画 Offset 妙用解析，开启动画新视界

Android

2023-09-23 15:41:14

利用 Offset 动画为您的 Flutter 路由注入活力

Offset 动画简介

Offset 动画是 Flutter 中一种灵活且强大的动画工具，可让您平移或旋转组件的位置。通过使用简单的 Tween 对象，您可以轻松定义动画的起始和结束位置，并将其添加到动画控制器中。

Offset 动画在路由中的应用

Offset 动画在路由中大放异彩，可实现各种动画效果，包括：

页面进场动画： 让新页面从特定方向滑入屏幕。
页面出场动画： 将页面从屏幕中滑出或淡出。
页面切换动画： 在页面之间平滑过渡，例如滑动或淡入淡出。
模态对话框动画： 以戏剧性方式弹出或关闭模态对话框。
加载动画： 在加载数据时显示进度条或其他视觉效果。

Offset 动画案例解析

为了展示 Offset 动画的实际应用，让我们构建一个页面切换动画，其中详情页从右向左滑入，而主页从右向左滑出。

在 main.dart 中定义路由：

routes: {
  '/': (context) => HomePage(),
  '/detail': (context) => DetailPage(),
},

在 HomePage 中，添加一个跳转到 DetailPage 的方法：

void navigateToDetailPage() {
  Navigator.push(
    context,
    PageRouteBuilder(
      pageBuilder: (context, animation, secondaryAnimation) => DetailPage(),
      transitionsBuilder: (context, animation, secondaryAnimation, child) {
        return SlideTransition(
          position: Tween<Offset>(
            begin: Offset(1.0, 0.0),
            end: Offset.zero,
          ).animate(animation),
          child: child,
        );
      },
    ),
  );
}