第二百八十六回

最新推荐文章于 2025-03-30 00:00:00 发布

原创最新推荐文章于 2025-03-30 00:00:00 发布 · 535 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#移动开发Flutter

一起Talk Flutter吧专栏收录该内容

961 篇文章

订阅专栏

本文介绍了在Flutter中如何使用PageRouteBuilder实现页面转场动画，包括动画的概念、pageBuilder属性的用法以及FadeTransition组件的应用实例。通过自定义动画，可在页面切换时添加动态效果。

文章目录

概念介绍
实现方法
示例代码

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

在这里插入图片描述

概念介绍

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

实现方法

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

pageBuilder属性：主要用来创建路由，它是方法类型，方法的参数中包含动画对象；
transitionDuration属性：主要用来控制动画的播放时间；
fullscreenDialog属性：主要用来控制页面是否以对话框窗口显示，默认值为false;
这三个参数中第一个参数包含的信息最多，它是方法类型，该方法的函数原型如下：
Widget Function(BuildContext context, Animation animation, Animation 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属性对应方法中的参数。我们也可以使用自定义的动画，与动画相关
的内容，我们将在后面章回中介绍。把上面的代码放到路由拦截器中，这样就可以在页面跳转时添加上动画效果，编译并且运行上面的程序，可以看到页面从下而上进入屏
幕，并且呈现出颜色渐变的动画效果。我在这里就不演示程序运行结果了，建议大家自己动手去实践。
看官们，关于"页面转场动画"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!