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

Question

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

我知道如何创建滑动效果，但它只是在当前页面的页面中滑动，这是通过这段代码完成的： 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,
          );
        });
  }

Answer 1

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

先创建class:

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(),
            );
          ),

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

how to make navigation animation that slides out the current page and slides in the other page

flutter

flutter-animation