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