flutter系列之:如何自定义动画路由

这篇具有很好参考价值的文章主要介绍了flutter系列之:如何自定义动画路由。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录
  • 简介
  • 自定义跳转使用
  • flutter动画基础
  • 实现一个自定义的route
  • 总结

简介

flutter中有默认的Route组件,叫做MaterialPageRoute,一般情况下我们在flutter中进行跳转的话,只需要向Navigator中传入一个MaterialPageRoute就可以了。

但是MaterialPageRoute太普通了,如果我们想要做点不同的跳转特效应该如何处理呢?

一起来看看吧。

自定义跳转使用

正常情况下,我们进行路由跳转需要用到Navigator和MaterialPageRoute,如下所示:

 Navigator.push(context, MaterialPageRoute(builder: (context) {
            return const NextPage();

如果要实现特定的路由动画,那么需要进行路由的自定义。

在flutter中也就是要使用PageRouteBuilder来自定义一个Route。

先来看下PageRouteBuilder的定义:

class PageRouteBuilder<T> extends PageRoute<T> {

  PageRouteBuilder({
    super.settings,
    required this.pageBuilder,
    this.transitionsBuilder = _defaultTransitionsBuilder,
    this.transitionDuration = const Duration(milliseconds: 300),
    this.reverseTransitionDuration = const Duration(milliseconds: 300),
    this.opaque = true,
    this.barrierDismissible = false,
    this.barrierColor,
    this.barrierLabel,
    this.maintainState = true,
    super.fullscreenDialog,
  })

PageRouteBuilder也是PageRoute的一种,在构建PageRouteBuilder的时候,通过控制不同的属性值,我们可以自由控制pageBuilder,transitionsBuilder,transitionDuration,reverseTransitionDuration等特性。

可以看到自由程度还是非常高的。

其中pageBuilder是路由将会跳转的页面,这个是必须要指定的,要不然路由也就没有意义了。

另外路由转换的效果可以经由transitionsBuilder来设置。

这里的RouteTransitionsBuilder是一个Function,返回一个Widget:

typedef RouteTransitionsBuilder = Widget Function(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child);

所以理论上,我们可以返回任何widget,但是一般来说,我们会返回一个AnimatedWidget,表示一个动画效果。

flutter动画基础

flutter中有个专门的动画包叫做flutter/animation.dart, flutter中所有动画的核心叫做Animation。

Animation中定义了很多listener用来监控动画的变动情况,并且还提供了一个AnimationStatus来存储当前的动画状态:

abstract class Animation<T> extends Listenable implements ValueListenable<T> {
  const Animation();

  AnimationWithParentMixin<T>

  @override
  void addListener(VoidCallback listener);

  @override
  void removeListener(VoidCallback listener);

  void addStatusListener(AnimationStatusListener listener);

  void removeStatusListener(AnimationStatusListener listener);

  AnimationStatus get status;

AnimationStatus是一个枚举类,它包含了现在动画的各种状态:

enum AnimationStatus {
  dismissed,

  forward,

  reverse,

  completed,
}

dismissed表示动画暂停在开头。

forward表示动画在从头到尾播放。

reverse表示动画在从尾到头播放。

completed表示动画播放完毕,停在了结尾。

有了动画的表示之后,如何对动画进行控制呢?这里就需要用到AnimationController了。

AnimationController可以控制动画的duration,动画的最低值lowerBound默认是0.0,动画的最高值upperBound默认是1.0等等。

默认情况AnimationController中从最低值到最高值是线性变化的,如果你想设置不同的Bound值,那么可以尝试自定义 Animatable, 如果你想动画的变动是非线性的,那么可以尝试继承Animation来实现自己的变动曲线。

实现一个自定义的route

这里我们使用flutter中的SlideTransition,SlideTransition是一个AnimatedWidget,它表示的是一个组件的位置变化的动画。

class SlideTransition extends AnimatedWidget {
  const SlideTransition({
    super.key,
    required Animation<Offset> position,
    this.transformHitTests = true,
    this.textDirection,
    this.child,
  }) : assert(position != null),
       super(listenable: position);

看下它的构造函数,可以看到SlideTransition需要一个position的属性,这个position是一个Animation对象,里面包含的是Offset。

同时这个position是一个listenable对象,通过监听里面Offset的变化,从而重新build对应的widget从而实现动画的效果。

Offset是一个表示位置的类,(0,0) 表示这个widget的左顶点在屏幕的左上角,同样的(1,1)表示这个widget的左顶点在屏幕的右下角。

因为route过后是一个新的页面,我们希望出现一个页面从右下角移动到左上角的动画,那么我们可以这样做:

Route customRoute() {
  return PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => const SecondPage(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      const begin = Offset(1.0, 1.0);
      const end = Offset.zero;
      const curve = Curves.easeOut;

      var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));

      return SlideTransition(
        position: animation.drive(tween),
        child: child,
      );
    },
  );
}

这里的begin和end表示widget从屏幕的右下角移动到了屏幕的左上角。

Tween表示的是开始值和结束值之间的线性插值,是一个动态过程,另外我们还可以这个插值变动的曲线,这里使用了CurveTween,选中了Curves.easeOut这种曲线类型。

最后调用animation.drive方法把Tween和Animation关联起来,这样一个路由动画就完成了。

总结

最后程序运行的结果如下:

flutter系列之:如何自定义动画路由

其实flutter中的动画很简单,大家记住就是widget位置沿不同的曲线变化即可。

本文的例子:https://github.com/ddean2009/learn-flutter.git文章来源地址https://www.toymoban.com/news/detail-418489.html

到了这里,关于flutter系列之:如何自定义动画路由的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • flutter系列之:做一个修改组件属性的动画

    目录 简介 flutter中的动画widget AnimatedContainers使用举例 总结 什么是动画呢?动画实际上就是不同的图片连续起来形成的。flutter为我们提供了一个AnimationController来对动画进行详尽的控制,不过直接是用AnimationController是比较复杂的,如果只是对一个widget的属性进行修改,可以做

    2024年02月03日
    浏览(60)
  • flutter系列之:使用AnimationController来控制动画效果

    目录 简介 构建一个要动画的widget 让图像动起来 总结 之前我们提到了flutter提供了比较简单好用的AnimatedContainer和SlideTransition来进行一些简单的动画效果,但是要完全实现自定义的复杂的动画效果,还是要使用AnimationController。 今天我们来尝试使用AnimationController来实现一个拖

    2024年02月05日
    浏览(38)
  • flutter使用get库管理路由,并设页面跳转动画和常见动画

    get库还是非常强大的一个仓库,里面包含了非常常用的一些方法,比如路由管理,这是最常见和最常用的一个功能了,我们可以先配置一个路由对象,然后在里面配置路由列表,并且设置路由跳转方式。 在路由管理里面单独配置某个页面的进入动画 在main.dart文件中配置GetM

    2024年01月21日
    浏览(39)
  • Matlab/Python教程系列 | 根据目录下的已有图片制作视频(动画)

    注1:本文系“MATLAB/Python编程教程”系列之一,致力于使用Python和Matlab实现特定的功能。本次要实现的功能是:根据目录下的已有图片制作视频(动画)。 在这个教程中,我们将一起学习如何使用MATLAB和Python编程语言,根据目录下的已有图片制作视频(动画)。我们将从头开始,逐

    2024年02月09日
    浏览(42)
  • flutter的自定义系列雷达图

    自定义是flutter进阶中不可缺少的ui层知识点,这里我们来总结下: 在Flutter中,自定义绘制通常是通过使用 CustomPaint 和 CustomPainter 来实现的。 创建 CustomPaint 组件 首先,需要创建一个 CustomPaint 组件。 CustomPaint 是一个Widget,它可以作为其他组件的子组件,用于提供自定义绘制

    2024年02月09日
    浏览(44)
  • flutter自定义系列之简单的K线图绘制

    上篇文章讲了flutter自定义的相关流程, 今天继续练习下flutter的自定义K线: 我们可以通过自定义Painter来实现一个简单的K线图界面: 创建一个自定义的Painter,用于绘制K线图: 创建一个StatefulWidget,用于处理缩放和滚动: 在需要使用K线图的地方,调用 KLineChart 组件并传入

    2024年02月08日
    浏览(45)
  • 【Flutter】Flutter 如何获取当前路由

    获取当前路由的信息可以帮助我们更好地理解用户的行为和应用的状态。例如,我们可能需要知道用户是从哪个页面

    2024年02月09日
    浏览(37)
  • Vue中如何进行自定义动画与动画效果设计

    在Vue中,动画效果是非常有用的,它可以使用户界面变得更加生动、有趣,从而提高用户体验。Vue提供了一套非常方便的动画系统,使得我们可以非常容易地实现动画效果。 在本文中,我们将学习如何在Vue中进行自定义动画与动画效果设计。我们将探讨使用CSS动画和Web动画实

    2024年02月09日
    浏览(45)
  • umi 中的路由切换动画如何实现

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 环境准备 1.1 在src文件目录下创建一个 layouts文件夹,在文件夹里创建两个文件。 1.2 在index.tsx文件中复制如下代码: 1.3 在index.less文件中复制如下代码: 1.4 .umirc.ts文件中的配置 要让layouts文件作为一级

    2024年02月09日
    浏览(48)
  • Flutter中GetX系列九--路由/页面跳转,传值,中间件(GetPage)

    1.1.使用to方法实现页面基本跳转  1.2.使用Get.toNamed()跳转到命名路由 系统跳转方式  Getx跳转方式 1.3.返回上一级页面Get.back() 系统跳转方式 Getx跳转方式​​​​​​​ 1.4.返回到根路由 系统跳转方式   Getx跳转方式 1.5.跳转到下一个页面的,但是没有返回按钮(一般应用于闪屏

    2024年02月16日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包