第一百零九回 页面转场动画

我们在上一章回中介绍了如何拦截路由相关的内容，本章回中将介绍 页面转场动画.闲话休提，让我们一起Talk Flutter吧。

概念介绍

我们在上一章回中介绍了路由拦截相关的内容，本章回中将使用路由拦截实现转场动画。

这里介绍的转场动画表示页面之间切换时的动画效果，在默认情况下Android系统中画面之间跳转时会从右向左进行，而且带着渐入的动画。IOS系统中画面之间跳转时会从下到上，也带着渐入效果。我们在项目中可以使用系统默认的渐入动画，也可以自定义动画，这个动画通常称为转场动画。

实现方法

我们通过PageRouteBuilder组件来实现转场动画，该组件的属性如下：

• pageBuilder属性：主要用来创建路由，它是方法类型，方法的参数中包含动画对象；
• transitionDuration属性：主要用来控制动画的播放时间；
• fullscreenDialog属性：主要用来控制页面是否以对话框窗口显示，默认值为false;

这三个参数中第一个参数包含的信息最多，它是方法类型，该方法的函数原型如下：

 Widget Function(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation);

从函数原型中可以看到，该方法的第一个参数是BuildContext类型，主要用来创建Widget，就是方法的返回值，这个Widget就是当前页面将要跳转到的页面。剩下的两个参数是Animation类型，其中包含动画对象，不过我使用时发现只有第二个参数中有值，第三个参数中没有值，跳转界面显示为黑色。

示例代码

介绍完转场动画的实现方法后，我们通过示例代码来演示：

///这里使用了PageRouteBuilder类和FadeTransition类
PageRouteBuilder(
    ///把动画传递给路由,annimation可以自己定义也可以使用参数中的默认值,不过2没有值
    pageBuilder:(context,animation1,animation2) {
      ///创建渐变组件主要使用了它的opacity属性
      return FadeTransition(
        opacity: animation1,
        child: SecondRouter(data: "animation",),);
    },
  fullscreenDialog: true,
  ///用来控制动画播放时长
  transitionDuration:const Duration(seconds: 3),
);

上面的代码中使用了FadeTransition组件的opacity属性来承载动画，动画值来自pageBuilder属性对应方法中的参数。我们也可以使用自定义的动画，与动画相关的内容，我们将在后面章回中介绍。

把上面的代码放到路由拦截器中，这样就可以在页面跳转时添加上动画效果，编译并且运行上面的程序，可以看到页面从下而上进入屏幕，并且呈现出颜色渐变的动画效果。我在这里就不演示程序运行结果了，建议大家自己动手去实践。

看官们，关于"页面转场动画"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!