时间戳

首页 > 解决方案 > 向后导航时颤动动画

flutter - 向后导航时颤动动画

问题描述

在 Flutter 中导航时，我使用PageRouteBuilder带有漂亮小动画的 。我真的很喜欢，Curves.elasticOut但是当我按下手机上的“返回”按钮时，我希望过渡是“不同的”。目前，它只是使用应用的动画，只是向后播放。向后播放时似乎不自然Curves.elasticOut，好像屏幕需要跳跃才能跳回上一个屏幕。

有没有办法可以Curves.elasticIn在向后导航时使用？

标签： flutteranimationflutter-animation

解决方案

使用示例：

    transitionDuration: Duration(milliseconds: 5000),
    pageBuilder: (context, animation, secondaryAnimation) => page,
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      var begin = Offset(1.0, 0.0);
      var end = Offset.zero;
      var curve = Curves.elasticIn;
      var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));
      print("primary: ${animation}");
      return SlideTransition(
        position: animation.drive(tween),
        child: child,
      );
    },
  );

animationin中的参数transitionBuilder包含status返回AnimationStatus.

一个简单的

var curve = animation.status == AnimationStatus.reverse ? Curves.elasticIn : Curves.elasticOut ;

会做。

推荐阅读