使用 page_transition 更改 Navigator.pop() 动画持续时间

Posted 2023-02-23

【中文标题】使用 page_transition 更改 Navigator.pop() 动画持续时间

【英文标题】：Change Navigator.pop() animation duration with page_transition

【发布时间】：2021-01-18 06:52:16

【问题描述】：

要在切换屏幕时播放动画，我使用的是page_transition: ^1.1.5

这是一个例子：

Navigator.push(context, PageTransition(type: PageTransitionType.rightToLeft, child: HandymanDocumentsOverview(), duration: Duration(milliseconds: 150)));

昨天我安装了firebase_core: ^0.5.0 并更新了所有其他 Firebase 依赖项。不知何故，感觉就像Navigator.pop(context); 的动画速度比以前慢了很多，甚至不匹配第一个动画速度。 有谁知道如何解决这个问题？

在这里编辑是我的flutter doctor -v

[✓] Flutter (Channel stable, 1.22.0, on Mac OS X 10.15.4 19E287, locale de-DE)
    • Flutter version 1.22.0 at /Users/bastianmeyer/flutter
    • Framework revision d408d302e2 (3 days ago), 2020-09-29 11:49:17 -0700
    • Engine revision 5babba6c4d
    • Dart version 2.10.0

 
[✓] android toolchain - develop for Android devices (Android SDK version 29.0.3)
    • Android SDK at /Users/bastianmeyer/Library/Android/sdk
    • Platform android-29, build-tools 29.0.3
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b4-5784211)
    • All Android licenses accepted.

[✓] Xcode - develop for ios and macOS (Xcode 12.0)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.0, Build version 12A7209
    • CocoaPods version 1.9.1

[✓] Android Studio (version 3.6)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 45.0.1
    • Dart plugin version 192.7761
    • Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b4-5784211)

[✓] VS Code (version 1.49.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.15.0

[✓] Connected device (1 available)
    • iPhone SE (2nd generation) (mobile) • FC1FC561-C5E6-4E13-AEE5-B5D9308C29B5 • ios • com.apple.CoreSimulator.SimRuntime.iOS-14-0 (simulator)

【问题讨论】：

您是在调试模式还是生产模式下进行测试？默认情况下，调试模式要慢得多。如果您想确定是否有什么东西导致了 Jank，您应该在生产模式下进行测试，看看它是否仍然存在。

我的意思是屏幕进入动画仍然很快离开动画比进入动画慢得多。你有关于我如何在生产模式下测试的资源吗？还是我只需要构建它，就像我将它发布到 testflight 一样？

您可以查看official docs。这是“发布”模式（不是生产，我的错）。

好吧，你是对的，它好得多，但仍然比预期的要慢。有什么想法吗？

好吧，从那里你需要隔离问题。删除（或降级）软件包以隔离有故障的软件包。您还应该检查它是在所有页面转换上还是少数几个。如果你能查明问题，它会容易得多。您可以check this video by Filip Hracik 了解如何优化您的应用。

【参考方案1】：

你正在使用的包还没有更新设置reverseTransitionDuration最近添加到flutter。 您可以投票this issue 以引起关注。

【参考方案2】：

更新：应该不再是版本1.1.7+3.的问题

【参考方案3】：

这是指定正向和反向持续时间的一种方法：

Navigator.of(context).push(
  PageRouteBuilder(
    transitionDuration: Duration(milliseconds: 800), // Forward Duration
    reverseTransitionDuration: Duration(milliseconds: 800), // Reverse Duration
    pageBuilder: (BuildContext context,
        Animation<double> animation,
        Animation<double> secondaryAnimation) 
      return NewScreen();
    ,
    transitionsBuilder: (BuildContext context,
        Animation<double> animation,
        Animation<double> secondaryAnimation,
        Widget child) 
      return FadeTransition(
        opacity: animation,
        child: child,
      );
    ,
  ),
);