Flutter：自定义过渡（PageRouteBuilder）禁用英雄动画答案

【问题标题】：Flutter: custom transition (PageRouteBuilder) disables Hero animationsFlutter：自定义过渡（PageRouteBuilder）禁用英雄动画
【发布时间】：2020-05-15 12:43:43
【问题描述】：

我目前正在尝试使用PageRouteBuilder 进行自定义转换。但是，当我使用它时，我的英雄动画停止工作。

注意：它适用于其他过渡，甚至是其他自定义过渡。

EnterExitRoute.dart

import 'package:flutter/material.dart';

class EnterExitRoute extends PageRouteBuilder {
  final Widget enterPage;
  final Widget exitPage;
  EnterExitRoute({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: new Tween<Offset>(
                      begin: const Offset(0.0, 0.0),
                      end: const Offset(-1.0, 0.0),
                    ).animate(animation),
                    child: exitPage,
                  ),
                  SlideTransition(
                    position: new Tween<Offset>(
                      begin: const Offset(1.0, 0.0),
                      end: Offset.zero,
                    ).animate(animation),
                    child: enterPage,
                  )
                ],
              );
          }
        );
}

我的猜测是英雄动画跟不上SlideTransition。

关于如何解决这个问题的任何想法？

【问题讨论】：

您没有使用来自transitionsBuilder 的Widget child 参数 - 很可能这就是原因，您为什么要使用那些enterPage 和exitPage？
因为我想在我的enterPage 上使用动画，但我想我在此过程中感到困惑。我会在今天晚些时候尝试更改它。谢谢你的回答。
在PageRouteBuilder 你有animation 和secondaryAnimation - 网上有一些教程如何使用它们

标签： flutter dart flutter-animation

【解决方案1】：

正如 pskink 所说，问题不在于使用 child 参考。

这是更新后的工作代码

import 'package:flutter/material.dart';

class EnterExitRoute extends PageRouteBuilder {
  final Widget enterPage;
  final Widget exitPage;
  EnterExitRoute({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,
          ) {
              var curvedAnimation = CurvedAnimation(
              parent: animation,
              curve: Curves.ease,
              );
              return Stack(
                children: <Widget>[
                  SlideTransition(
                    position: new Tween<Offset>(
                      begin: const Offset(0.0, 0.0),
                      end: const Offset(-1.0, 0.0),
                    ).animate(curvedAnimation),
                    child: exitPage,
                  ),
                  SlideTransition(
                    position: new Tween<Offset>(
                      begin: const Offset(1.0, 0.0),
                      end: Offset.zero,
                    ).animate(curvedAnimation),
                    child: child,
                  )
                ],
              );
          }
        );
}

【讨论】：