如何使用 Flutter 中的页面路由生成器执行简单的“淡出然后淡入”

Question

我正在尝试使用 实现从一条导航路线到另一条导航路线的漂亮简单的淡入淡出动画PageRouteBuilder。我希望当前路线完全淡出，然后在旧路线消失后，新路线应该淡入。

到目前为止，在我的 PageRouteBuilder 类中，我可以将新路线从 0 淡入到 1，但我希望旧路线首先完全淡出，然后在旧路线淡出后让新路线淡入。我当前的代码，一旦新路线淡入完成，旧路线就会突然消失。

我还想强调的是，我不希望它们同时淡出/淡入，而是要淡出旧路线，然后淡入以使新路线按顺序发生。

import 'package:flutter/material.dart';

class FadePageTransition extends PageRouteBuilder {
  final Widget child;

  FadePageTransition({
    required this.child,
  }) : super(
          transitionDuration: const Duration(milliseconds: 600),
          pageBuilder: (context, animation, secondaryAnimation) => child,
        );

  @override
  Widget buildTransitions(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) => FadeTransition(
        opacity: animation,
        child: child,
      );
}

我知道该secondaryAnimation属性控制旧路线如何离开的动画，不是吗？但我只是不确定在这种情况下这会如何运作。

Answer 1

使用 2 FadeTransitionintransitionBuilder:可以解决您的问题。

如果这个解释有点难以理解，这就是你使用它的方式。

transitionsBuilder: (
       BuildContext context,
       Animation<double> animation,
       Animation<double> secondaryAnimation,
       Widget child,
   ) {
     return FadeTransition(
       opacity: animation,
       child: FadeTransition(
         opacity: secondaryAnimation,
         child: child,
       ),
     );
   }

就是这样！