如何在推送路由颤动上创建淡入淡出过渡?

Posted

技术标签:

【中文标题】如何在推送路由颤动上创建淡入淡出过渡?【英文标题】:How to create fade transition on push route flutter? 【发布时间】:2019-08-15 19:22:50 【问题描述】:

我正在尝试为推送路由创建一个淡入淡出过渡,因为它创建了一个自定义路由,例如

class CustomPageRoute<T> extends MaterialPageRoute<T> 
  CustomPageRoute(WidgetBuilder builder, RouteSettings settings)
      : super(builder: builder, settings: settings);

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

并通过按下按钮调用它

onPressed: () 
   Navigator.push(context, CustomPageRoute(builder: (context) 
       return FirstScreen();
   ));

但这会给出一个带有滑动+淡入淡出的奇怪动画。 如何避免这里面的滑动动画?

这是我的代码的输出:

【问题讨论】:

【参考方案1】:

您应该从PageRoute 扩展而不是MaterialPageRoute

    class CustomPageRoute<T> extends PageRoute<T> 
      CustomPageRoute(this.child);
      @override
      // TODO: implement barrierColor
      Color get barrierColor => Colors.black;

      @override
      String get barrierLabel => null;

      final Widget child;

      @override
      Widget buildPage(BuildContext context, Animation<double> animation,
          Animation<double> secondaryAnimation) 
        return FadeTransition(
          opacity: animation,
          child: child,
        );
      

      @override
      bool get maintainState => true;

      @override
      Duration get transitionDuration => Duration(milliseconds: 500);
    

用法:

          final page = YourNewPage();
          Navigator.of(context).push(CustomPageRoute(page));

【讨论】:

嗯。我根本看不到动画。不知道为什么这是一个非常简单的例子。 @JoKr 我首先赞成你的评论,但我发现它对我不起作用,因为我有一个空白页面正在转换。我需要添加一个Scaffold 以使其工作

以上是关于如何在推送路由颤动上创建淡入淡出过渡?的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Activity 过渡上执行淡入淡出动画?

在 css jQuery 中应用淡入淡出到粘性导航的过渡淡入淡出

如何使用 JQuery 添加淡入淡出或图像过渡效果?

Vue CSS淡入/淡出视频过渡

CSS 过渡 - 仅在悬停时淡入淡出元素

如何在视图控制器之间进行淡入淡出/无过渡