Flutter Fluro路由库的页面切换动画效果

fluro的页面切换函数 Router.navigateTo 支持11种不同效果的切换动画，支持延时设置和自定义切换效果，下面将会对所有的效果展示出来，方便以后可以根据实际需求进行选择。

切换效果分类

fluro内置的切换动画可以分为3类：

1. 各平台原生效果
2. 非原生效果
3. 自定义效果

Router.navigateTo(
    context
    path
    transition
    transitionBuilder
    transitionDuration
)

上一篇文章，已经介绍过Flutter的路由管理和Fluro的使用了，我们已经知道 Router.navigateTo 函数。 只要修改transition则可以实现不同的切换效果，transitionBuilder用于自定义切换效果，transitionDuration为切换动画所需时间的设置。

 

 

 

1. 各平台原生效果

这里的平台只针对android和ios，在上一篇文章中已经介绍过，使用系统默认的路由管理系统进行页面跳转的时候，flutter会根据所在平台执行不同的切换效果，在安卓中是从下到上的渐显，而ios是从右向左的滑入。

在fluro中，原生效果分为三种，每种类型都成对出现：

1. 随平台使用效果：TransitionType.native 和 TransitionType.nativeModal

   1. 

   1. 使用安卓的效果：TransitionType.material 和 TransitionType.materialFullScreenDialog

      

   1. 使用ios的效果：TransitionType.cupertino 和 TransitionType.cupertinoFullScreenDialog

      

   每个效果都成对出现，因为Flutter中的原生路由切换效果分为非全屏和全屏。

   在Material和Cupertino中，全屏效果的AppBar左侧是关闭按钮而不是后退按钮。

   在iOS上，全屏效果不再是向左滑入，变成了从下往上移入，而且不能用向右滑动的手势关闭页面了。

   需要注意的是，以上6中原生的切换效果并不支持transitionDuration自定义切换时间，均采用和原生一致的效果。

   2. 非原生效果

   fluro也内置了4种常见的效果，这4个效果都是支持transitionDuration自定义切换时间。

   1. 渐显：TransitionType.fadeIn

      

       

   2. 从左向右进入：TransitionType.inFromLeft

      

       

2.  

3.  

4. 从右向左进入：TransitionType.inFromRight

1. 从下向上进入：TransitionType.inFromBottom

3. 自定义效果

除了以上10种效果外，还有一个特殊的自定义效果，TransitionType.custom。

它必须搭配transitionBuilder参数。

自定义效果也支持使用 transitionDuration 自定义切换时间。

下面就是一个自定义的渐隐渐显效果示例：

...
Router.navigateTo(
    context,
    path,
    transition: TransitionType.custom,
    transitionBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {
        return FadeTransition(
          opacity: CurvedAnimation(
              parent: animation,
              curve: Curves.linear,
          ),
          child: child
        );
    },
    transitionDuration: Duration(seconds: 1), // 需要1s切换
);
...
复制代码