Flutter利用Hero组件实现自定义路径效果的动画

目录
  • 前言
  • Hero 的定义
  • RectTween
  • 自定义RectTween
  • 运行效果
  • 总结

前言

我们在 页面切换转场动画，英雄救场更有趣！介绍了 Hero 动画效果，使用 Hero 用于转场能够提供非常不错的体验。既然称之为英雄，肯定还有其他技能，本篇我们就来探索一下 Hero 动画的返回效果。

Hero 的定义

Hero 组件是一个 StatefulWidget，构造方法如下：

const Hero({
  Key? key,
  required this.tag,
  this.createRectTween,
  this.flightShuttleBuilder,
  this.placeholderBuilder,
  this.transitionOnUserGestures = false,
  required this.child,
})

其中 createRectTween 就是一个矩形插值，用于控制 Hero 组件的路径。实际上，和普通动画一样，也是有一个时间曲线，取值范围是0-1.0，然后createRectTween保证 Hero 组件动画前后能够达到矩形指定位置和大小。下面一张图是官网的说明图：

image.png

RectTween

RectTween 和 Tween类似，实际上就是矩阵在动画过程中的变化。我们来看 RectTween 的定义：

class RectTween extends Tween<Rect?> {
  RectTween({ Rect? begin, Rect? end }) : super(begin: begin, end: end);

  /// 通过给定的动画时间值构建新的插值矩形
  @override
  Rect? lerp(double t) => Rect.lerp(begin, end, t);
}

这个类很简单，其实就是每次动画时间点上调用 Rect.lerp 构建一个插值的矩形。Rect.lerp 方法如下：

static Rect? lerp(Rect? a, Rect? b, double t) {
    assert(t != null);
    if (b == null) {
      if (a == null) {
        return null;
      } else {
        final double k = 1.0 - t;
        return Rect.fromLTRB(a.left * k, a.top * k, a.right * k, a.bottom * k);
      }
    } else {
      if (a == null) {
        return Rect.fromLTRB(b.left * t, b.top * t, b.right * t, b.bottom * t);
      } else {
        return Rect.fromLTRB(
          _lerpDouble(a.left, b.left, t),
          _lerpDouble(a.top, b.top, t),
          _lerpDouble(a.right, b.right, t),
          _lerpDouble(a.bottom, b.bottom, t),
        );
      }
    }
  }

在矩形 a 和矩形 b 都不为空的时候，返回的就是一个通过定点定义的新的矩形。这里的关键是_lerpDouble 方法，其实最终就是根据动画时间完成顶点的移动。

double? lerpDouble(num? a, num? b, double t) {
  /// ...
  return a * (1.0 - t) + b * t;
}

也就是从矩形 a  的顶点逐步移动到矩形 b的顶点，从而完成了两个矩形的动画过渡。有了这个基础我们就可以构建自定义的 RectTween 了。和我们的之前说过的动画曲线（动画曲线天天用，你能自己整一个吗？看完这篇你就会了！）是类似的。

自定义RectTween

我们来一个自定义 RectTween，然后保证起始点是矩形 a，结束点是矩形 b，然后中间沿曲线变动就可以了。下面是我们利用曲线将时间转换后得到的一个自定义 RectTween。其中使用曲线转换后的transformT取值还是从0-1.0，然后使用_rectMove 方法就能实现从开始的矩形过渡到结束的矩形了。

class CustomRectTween extends RectTween {
  final Rect begin;
  final Rect end;

  CustomRectTween({required this.begin, required this.end})
      : super(begin: begin, end: end);

  @override
  Rect lerp(double t) {
    double transformT = Curves.easeInOutBack.transform(t);

    var rect = Rect.fromLTRB(
        _rectMove(begin.left, end.left, transformT),
        _rectMove(begin.top, end.top, transformT),
        _rectMove(end.right, end.right, transformT),
        _rectMove(begin.bottom, end.bottom, transformT));

    return rect;
  }

  double _rectMove(double begin, double end, double t) {
    return begin * (1 - t) + end * t;
  }
}

运行效果

可以看到结束的时候，有个回弹效果，那是因为使用了Curves.easeInOutBack 这个曲线。源码已上传至：动画相关源码。

运行效果

总结

本篇介绍了 Hero 动画组件的 createRectTween 属性实现自定义路径效果的动画。实际使用的时候，可以根据自己需要构建一些有趣的路径提升用户体验或增加趣味性。

以上就是Flutter利用Hero组件实现自定义路径效果的动画的详细内容，更多关于Flutter自定义路径效果动画的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 基于Flutter制作一个心碎动画特效

    基于Flutter制作一个心碎动画特效

    目录 前言 实现步骤 1.绘制一个心 2.绘制心的裂痕 3.加入动画 完整代码 小结 前言 继续动画探索,今天用Flutter制作一个心碎的感觉,灵感来源于今天的股市,哎,心哇凉哇凉的.废话不多说,开始. 效果图先上: 实现步骤 1.绘制一个心 首先我们使用两段三阶贝塞尔曲线制作一个心型,这里因为需要实现心碎的效果,所以我们需要将心的两段用两段路径path进行绘制出来,效果: 绘制代码: canvas.translate(size.width / 2, size.height / 2); Pai

  • Flutter实现心动的动画特效

    Flutter实现心动的动画特效

    目录 实现动画 混入 SingleTickerProviderStateMixin 创建动画 抽离成小组件 完整代码 为了追求更好的用户体验,有时候我们需要一个类似心跳一样跳动着的控件来吸引用户的注意力,这是一个小小的优化需求,但是在 Flutter 里动画两件套就像裹脚布一样臭长,所以需要像封装一个 AnimatedWidget,解放生产力. 实现动画 混入 SingleTickerProviderStateMixin 当创建一个 AnimationController 时,需要传递一个vsy

  • Android Flutter实现页面切换转场动画效果

    Android Flutter实现页面切换转场动画效果

    目录 前言 Hero 动画过程 Hero 基础示例 总结 前言 写了一篇基础的性能优化的内容,继续我们的动画相关的介绍.今天的主角是英雄 —— Hero 组件.Hero 组件非常适合从列表.概览页切换到详情页转场动画场合.因为可以将两个页面的组件串起来动画,体验上会觉得整个操作的连贯性非常好.下面是我们这篇要做的一个效果. 屏幕录制2021-11-09 下午9.39.49.gif Hero 动画过程 Hero 本质是是在不同的路由页面做了一个中转层,然后通过动画完成过渡,下面用4张图是官方演示的

  • Android Flutter实现五种酷炫文字动画效果详解

    Android Flutter实现五种酷炫文字动画效果详解

    目录 前言 波浪涌动效果 波浪线跳动文字组 彩虹动效 滚动广告牌效果 打字效果 其他效果 自定义效果 总结 前言 偶然逛国外博客,看到了一个介绍文字动画的库,进入 pub 一看,立马就爱上这个动画库了,几乎你能想到的文字动画效果它都有!现在正式给大家安利一下这个库:animated_text_kit.本篇我们介绍几个酷炫的效果,其他的效果大家可以自行查看官网文档使用. 波浪涌动效果 波浪涌动 上面的动画效果只需要下面几行代码,其中loadUntil用于控制波浪最终停留的高度,取值是0-1.0,如

  • Android Flutter实现3D动画效果示例详解

    Android Flutter实现3D动画效果示例详解

    目录 前言 AnimatedWidget 简介 3D 旋转动画的实现 总结 前言 上一篇我们介绍了 Animation 和 AnimationController 的使用,这是最基本的动画构建类.但是,如果我们想构建一个可复用的动画组件,通过外部参数来控制其动画效果的时候,上一篇的方法就不太合适了.在 Flutter 中提供了 AnimatedWidget 组件用于构建可复用的动画组件.本篇我们用 AnimatedWidget 来实现组件的3D 旋转效果,如下图所示. AnimatedWidge

  • Flutter添加页面过渡动画实现步骤

    Flutter添加页面过渡动画实现步骤

    目录 正文 使用插件探索不同的转换 步骤 1: 在 pubspec.yaml 中添加页面动画转换 步骤 2: 在 PageOne 上导入库 步骤3.添加以下导航代码行 其他类型转换的完整代码: 总结 正文 大家好,在这篇文章中,我们将学习如何添加动画,同时从一个页面到其他在 Flutter.我们将覆盖不同类型的动画和实现基本动画 Flutter 使用包页动画过渡. 动画在提升用户体验方面起着至关重要的作用,但动画到底是什么呢? 设计语言,例如 Material,定义了在路线(或屏幕)之间转换时的

  • Flutter利用Hero组件实现自定义路径效果的动画

    Flutter利用Hero组件实现自定义路径效果的动画

    目录 前言 Hero 的定义 RectTween 自定义RectTween 运行效果 总结 前言 我们在 页面切换转场动画,英雄救场更有趣!介绍了 Hero 动画效果,使用 Hero 用于转场能够提供非常不错的体验.既然称之为英雄,肯定还有其他技能,本篇我们就来探索一下 Hero 动画的返回效果. Hero 的定义 Hero 组件是一个 StatefulWidget,构造方法如下: const Hero({   Key? key,   required this.tag,   this.crea

  • Flutter利用注解生成可自定义的路由的实现

    route_generator是什么 这是一个简单的 Flutter 路由生成库,只需要少量的代码,然后利用注解配合源代码生成,自动生成路由表,省去手工管理路由代码的烦恼. 特性 自定义路由名称 自定义路由动画 自定义路由参数 自定义路由逻辑 依赖 dependencies: # Your other regular dependencies here route_annotation: ^0.1.0 dev_dependencies: # Your other dev_dependencies

  • 利用JS实现scroll自定义滚动效果详解

    前言 最近在公司开发项目的时候,原生滚动条中有些东西没办法自定义去精细的控制,于是开发一个类似于better-scroll一样的浏览器滚动监听的JS实现,下面我们就来探究一下自定义滚动需要考虑哪些东西,经过哪些过程.话不多说了,来一起看看详细的介绍吧. 选择滚动监听的事件 因为是自定义手机端的滚动事件,那我选择的是监听手机端的三个touch事件来实现监听,并实现了两种滚动效果,一种是通过-webkit-transform,一种是通过top属性.两种实现对于滚动的基本效果够能达到,可是top的不适

  • Flutter利用SizeTransition实现组件飞入效果

    Flutter利用SizeTransition实现组件飞入效果

    目录 前言 SizeTransition 介绍 应用 使用 SizeTransition 实现其他动画效果 总结 前言 继续 Transition 系列动画组件的介绍,本篇来介绍 SizeTransition.SizeTransition 用于更改子组件的尺寸来实现动画.支持垂直方向或水平方向修改动画,同时尺寸更改的起始位置可以从顶部.中部.底部(垂直方向)或左侧.中间.右侧(水平方向)开始.通过这些特性,我们可以构建组件飞入的效果. SizeTransition 介绍 SizeTransiti

  • Flutter利用Canvas绘制精美表盘效果详解

    Flutter利用Canvas绘制精美表盘效果详解

    目录 前言 初始化 面板 刻度 刻度线 刻度值 指针 时针 分针 秒针 动起来 前言 趁着周末空闲时间使用 Flutter 的 Canvas制作了一个精美表盘. 最终实现的效果还不错,如下: 前面说到使用 Canvas 实现该表盘效果,而在 Flutter 中使用 Canvas 更多的则是继承 CustomPainter 类实现 paint 方法,然后在 CustomPaint 中使用自定义实现的 CustomPainter. 比如这里创建的 DialPainter 使用如下: @overrid

  • Flutter 利用CustomScrollView实现滑动效果

    Flutter 利用CustomScrollView实现滑动效果

    我们在之前的文章中//www.jb51.net/article/213709.htm 使用了 ListView 将几个 GridView 组合在一起实现滑动效果,今天利用CustomScrollView改造一下代码 CustomScrollView 简介 CustomScrollView的常用属性如下: slivers:最重要的属性,由多个SliverXX组件组成的数组,包括如 SliverList(对应 ListView),SliverGrid(对应 GridView)等,如果普通组件无法直接

  • Flutter利用Canvas模拟实现微信红包领取效果

    Flutter利用Canvas模拟实现微信红包领取效果

    目录 前言 效果 红包弹出 红包布局 上半部分 下半部分 金币绘制 金币文字绘制 头像和文字 金币旋转 红包开启 结果弹出 前言 前面写了一篇Flutter利用Canvas绘制精美表盘效果详解的文章,对 Flutter 中的 Canvas 使用有了进一步的理解,就想着再用 Canvas 实现一个什么样的效果来加深一下对 Canvas 使用的理解,这个时候正好看到群里有人发红包,于是就想着能不能在 Flutter 中使用 Canvas 实现微信领取红包的效果?想到就做,知行合一,经过几天空余时间的

  • 利用PyQt5中QLabel组件实现亚克力磨砂效果

    利用PyQt5中QLabel组件实现亚克力磨砂效果

    目录 前言 实现方法 高斯模糊 亚克力纹理 亚克力标签 测试 前言 Windows10 在 UWP 应用中支持亚克力画刷,可以在部件的底部绘制亚克力效果的背景图.下面我们使用 QLabel 来模拟这个磨砂过程. 实现方法 MSDN 文档中介绍了亚克力材料的配方,包括:高斯模糊.亮度混合.色调混合和噪声纹理. 高斯模糊 我们先来实现高斯模糊的效果,使用 scipy 可以很轻松的实现这个过程: # coding:utf-8 import numpy as np from PIL import Ima

  • Flutter刷新组件RefreshIndicator自定义样式demo

    目录 前言 效果图 RefreshIndicator初始样式 RefreshIndicator样式修改(简单) RefreshIndicator样式修改(复杂) 简单的样式修改 复杂的样式修改 前言 RefreshIndicator是Flutter里常见的下拉刷新组件,使用是比较方便的.但由于产品兄弟对其固定的刷新样式很是不满,而且代码中已经引入了很多RefreshIndicator,直接替换其他组件的话,对代码的改动可能比较大,所以只能自己动手改一改源码,在达到产品的要求的同时尽可能减少代码的

  • vue swipe自定义组件实现轮播效果

    vue swipe自定义组件实现轮播效果

    本文实例为大家分享了vue swipe自定义组件实现轮播效果的具体代码,供大家参考,具体内容如下 <template> <layout-div :style="getStyle" class="over-h posi-r"> <layout-div :style="getChildStyle" class="flex" @load="loadHandle"> <sl

随机推荐