android - Flutter PageRouteBuilder transitionsBuilder自定义辅助动画？

Question

在PageRouteBuilder的transitionBuilder方法中，我使用的是下面的代码，但是辅助动画总是与动画相反。我们如何在页面上进行幻灯片过渡并在退出时淡出？

Widget leftToRightSlideTransition(context, animation, secondaryAnimation, child) {
  final Tween<double> doubleTween = Tween<double>(begin: 1.0, end: 0.0);
  final Animation<double> animDouble = doubleTween.animate(secondaryAnimation);
  final fadeTransition = FadeTransition(opacity: animDouble, child: child);

  var begin = Offset(-1.0, 0.0);
  var end = Offset.zero;
  var tween = Tween(begin: begin, end: end).chain(
    CurveTween(curve: Curves.easeIn),
  );
  return SlideTransition(
    position: tween.animate(animation),
    child: fadeTransition,
  );
}

Answer 1

如果要为进入和退出页面定制动画，则需要将SlideTransition放入Stack小部件，以进入页面和退出页面。这是示例，iOS SlideTransition(Cupertino)的外观。

import 'package:flutter/material.dart';

class CupertinoRoute extends PageRouteBuilder {
  final Widget enterPage;
  final Widget exitPage;
  CupertinoRoute({this.exitPage, this.enterPage})
      : super(
          pageBuilder: (
            BuildContext context,
            Animation<double> animation,
            Animation<double> secondaryAnimation,
          ) {
            return enterPage;
          },
          transitionsBuilder: (
            BuildContext context,
            Animation<double> animation,
            Animation<double> secondaryAnimation,
            Widget child,
          ) {
            return Stack(
              children: <Widget>[
                SlideTransition(
                  position: Tween<Offset>(
                    begin: const Offset(0.0, 0.0),
                    end: const Offset(-0.33, 0.0),
                  ).animate(
                      CurvedAnimation(
                      parent: animation,
                      curve: Curves.linearToEaseOut,
                      reverseCurve: Curves.easeInToLinear,
                    ),
                      ),
                  child: exitPage,
                ),
                SlideTransition(
                  position: Tween<Offset>(
                    begin: const Offset(1.0, 0.0),
                    end: Offset.zero,
                  ).animate(
                      CurvedAnimation(
                      parent: animation,
                      curve: Curves.linearToEaseOut,
                      reverseCurve: Curves.easeInToLinear,
                    ),
                      ),
                  child: enterPage,
                )
              ],
            );
          },
        );
}

在这里您可以自定义动画 SlideTransition。

// And use it like this
Navigator.push(
        context,
        CupertinoRoute(
            exitPage: HomeScreen(),
            enterPage: SecondScreen()));