Flutter中的路由过场动画 PageTransitionsTheme

2023-10-11 18:35:25

在Flutter中，页面之间的切换通常伴随着过场动画。这些动画可以增强应用程序的用户体验，让页面切换过程更加流畅和美观。

Flutter提供了PageTransitionsTheme来管理路由的过场动画。我们可以使用它来控制动画的类型、持续时间和曲线。

使用PageTransitionsTheme

要使用PageTransitionsTheme，首先需要在MaterialApp或CupertinoApp中将其作为主题的一部分进行设置：

MaterialApp(
  theme: ThemeData(
    pageTransitionsTheme: PageTransitionsTheme(
      builders: {
        TargetPlatform.android: CupertinoPageTransitionsBuilder(),
        TargetPlatform.iOS: CupertinoPageTransitionsBuilder(),
      },
    ),
  ),
);

在上面的示例中，我们使用了CupertinoPageTransitionsBuilder作为Android和iOS平台的过场动画构建器。

内置过场动画

Flutter提供了两种内置的过场动画：

淡入淡出 (Fade)： 即将进入的页面从完全透明逐渐变为完全不透明，同时即将离开的页面从完全不透明逐渐变为完全透明。
滑动 (Slide)： 即将进入的页面从屏幕的一侧滑入，同时即将离开的页面从屏幕的另一侧滑出。

我们可以通过设置PageTransitionsTheme.builders属性来指定要使用的过场动画构建器。例如：

PageTransitionsTheme(
  builders: {
    TargetPlatform.android: CupertinoPageTransitionsBuilder(),
    TargetPlatform.iOS: CupertinoPageTransitionsBuilder(),
  },
);

自定义过场动画

如果内置的过场动画不能满足我们的需求，我们可以自定义过场动画。我们可以继承PageTransitionsBuilder类，然后重写buildTransitions方法来定义自定义的过场动画。

例如，以下代码定义了一个自定义的过场动画，它将即将进入的页面从屏幕底部滑入，同时即将离开的页面从屏幕顶部滑出：

class MyPageTransitionsBuilder extends PageTransitionsBuilder {
  @override
  Widget buildTransitions<T>(
      PageRoute<T> route,
      BuildContext context,
      Animation<double> animation,
      Animation<double> secondaryAnimation,
      Widget child,
  ) {
    return SlideTransition(
      position: Tween<Offset>(
        begin: Offset(0.0, 1.0),
        end: Offset.zero,
      ).animate(animation),
      child: SlideTransition(
        position: Tween<Offset>(
          begin: Offset.zero,
          end: Offset(0.0, -1.0),
        ).animate(secondaryAnimation),
        child: child,
      ),
    );
  }
}

然后，我们可以通过设置PageTransitionsTheme.builders属性来指定要使用的自定义过场动画构建器。例如：

PageTransitionsTheme(
  builders: {
    TargetPlatform.android: MyPageTransitionsBuilder(),
    TargetPlatform.iOS: MyPageTransitionsBuilder(),
  },
);