如何制作滑出当前页面并滑入另一页面的导航动画答案

【问题标题】：how to make navigation animation that slides out the current page and slides in the other page如何制作滑出当前页面并滑入另一页面的导航动画
【发布时间】：2020-09-09 20:44:43
【问题描述】：

如何制作滑出当前页面并滑入其他页面的导航动画。

我知道如何创建滑动效果，但它只在当前页面上的页面中滑动，这是通过以下代码完成的： Navigator.push(context, _createRoute());

  Route _createRoute() {
    return PageRouteBuilder(
        pageBuilder: (context, animation, secondaryAnimation) => PageTwo(),
        transitionDuration: Duration(milliseconds: 500),
        transitionsBuilder: (context, animation, secondaryAnimation, child) {
          var begin = Offset(1.0, 0.0);
          var end = Offset.zero;
          var curve = Curves.easeOut;

          var tween = Tween(begin: begin, end: end);
          var curvedAnimation = CurvedAnimation(
            parent: animation,
            curve: curve,
            reverseCurve: curve,
          );

          return SlideTransition(
            position: tween.animate(curvedAnimation),
            child: child,
          );
        });
  }

【问题讨论】：

标签： flutter flutter-animation

【解决方案1】：

您可以通过扩展 PageRouteBuilder 为过渡动画创建一个新类，也可以避免重复，以后可以重用过渡。

首先创建类：

class MyTransition extends PageRouteBuilder {
  final Widget oldScreen;
  final Widget newScreen;
  MyTransition({this.oldScreen, this.newScreen})
      : super(
          pageBuilder: (
            BuildContext context,
            Animation<double> animation,
            Animation<double> secondaryAnimation,
          ) =>
              newScreen,
          transitionsBuilder: (
            BuildContext context,
            Animation<double> animation,
            Animation<double> secondaryAnimation,
            Widget child,
          ) =>
              Stack(
            children: <Widget>[
              SlideTransition(
                position: new Tween<Offset>(
                  begin: const Offset(0.0, 0.0),
                  end: const Offset(-1.0, 0.0),
                ).animate(animation),
                child: oldScreen,
              ),
              SlideTransition(
                position: new Tween<Offset>(
                  begin: const Offset(1.0, 0.0),
                  end: Offset.zero,
                ).animate(animation),
                child: newScreen,
              )
            ],
          ),
        );
}

请注意，使用堆栈来管理同一位置上的两个动画。然后只需使用 slideTransition。

之后，您只需在任何您想要过渡的地方调用它：

Navigator.push(
            context,
            MyTransition(
              oldScreen: this,
              newScreen: PageTwo(),
            );
          ),

【讨论】：