Question

在Flutter中导航时，我将PageRouteBuilder与一个漂亮的小动画一起使用。我真的很喜欢Curves.elasticOut，但是当我按下手机上的“后退”按钮时，我希望转换是“不同的”。当前，它仅使用向后播放的应用动画。向后播放Curves.elasticOut时似乎不自然，好像屏幕需要跳才能跳回到上一个屏幕一样。

是否有一种方法可以使向后导航时使用Curves.elasticIn？

Answer 1

使用示例：

    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,
      );
    },
  );

animation中的参数transitionBuilder包含属性status，该属性返回一个AnimationStatus。

一个简单的

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

会的。

向后导航时出现抖动动画

1 个答案: