Android利用Flutter实现立体旋转效果

目录
  • 前言
  • ImageShader 简介
  • 构建 ui.Image对象
  • 使用 ImageShader 填充形状
  • 立体旋转效果实现
  • 总结

前言

之前我们提到了 CustomPaint erPaint 可以使用渐变(GradientShader)来填充绘制的图形,本篇我们来介绍使用图片填充,并且配合动画实现“立体”旋转效果,之所以给“立体”加上引号,是因为实际是通过填充图片自身的光影效果旋转后看起来像是立体效果一样。下面是实现的效果图。

ImageShader 简介

ImageShader 的定义如下,我们来看看各个参数的用途。

  • image:用于填充的图像,是 Image 类,注意这个 Image 类定义在 dart:ui 库中,并不是我们用于构建图像组件的 Widget 下面的 Image 类。
  • tmx:图形在 x 轴的处理方式,即当被填充的宽度与图片宽度不匹配时,在横轴方向如何填充。
  • tmy:图形在y 轴的处理方式,即当被填充的高度与图片高度不匹配时,在纵轴方向如何填充。
  • matrix4:对填充图像的三维空间的平移、旋转等变换操作。
  • filterQuality:当图片尺寸和被填充图形的尺寸不一致时,采样的质量,有高(high)、中 (medium)、低(low)三类。
ImageShader(
  Image image,
  TileMode tmx,
  TileMode tmy,
  Float64List matrix4,
  {
    FilterQuality? filterQuality,
  }
)

tmxtmyTileMode 枚举,有以下几种取值:

clamp:图片不能完整填充图形时,使用最接近图形边缘的颜色进行填充,其实就是边缘的延伸。比如同时这是 tmx 和 tmy 都为 TileMode.clamp 的时候的效果图如下。

repeated:这个好理解,就是在各自方向重复。

decal:就是这个方向不做任何处理,使用透明填充,比如我们将上面的 tmy 改成 decal,就只会在 x 轴重复了。

mirror:顾名思义,就是镜像填充,下面是 tmxmirrortmyrepeated的效果图。

构建 ui.Image对象

要使用 ImageShader,我们首先要从图片资源中构建ui.Image 对象。这需要将图片文件按ByteData 二进制方式读取,在将二进制文件解码成为 ui.Image 对象。这个操作是异步的,因此在操作没完成前不能使用图像资源,我们设置了一个isImageLoaded布尔值标识图像是否加载完成。

final ByteData data = await rootBundle.load('images/beauty.jpg');
fillImage = await loadImage(Uint8List.view(data.buffer));

Future<ui.Image> loadImage(Uint8List img) async {
  final Completer<ui.Image> completer = Completer();
  ui.decodeImageFromList(img, (ui.Image img) {
    setState(() {
      isImageLoaded = true;
    });
    return completer.complete(img);
  });
  return completer.future;
}

使用 ImageShader 填充形状

使用 ImageShader 填充和 GradientShader 类似,按我们上面说的参数构建一个 ImageShader 对象就可以了,代码如下。注意,Paint 对象的填充方式必须是 fill,如果是空心的话是看不到效果的。

@override
void paint(Canvas canvas, Size size) {
  var paint = Paint();
  paint.style = PaintingStyle.fill;

  paint.shader = ImageShader(
    image,
    TileMode.mirror,
    TileMode.repeated,
    Matrix4.identity().storage,
    filterQuality: FilterQuality.high,
  );
  canvas.drawRect(Rect.fromLTRB(0, 0, size.width, size.height), paint);
}

立体旋转效果实现

立体效果需要利用填充图像的光影效果,因此我们需要找一张图片,比如明暗不同,或色彩不同的,这样旋转起来就会感觉是立体的。旋转的话使用 Matrix4的旋转变换就行。同时,为了让旋转过程展示的图像不固定,我们旋转的时候可以通过Matrix4的平移显示不同图形的区域。下面是我们用于测试的两张图片。

实现的代码如下所示,其中animationValue是动画过程中 Animation 对象的值,我们的动画时长设置为10秒。这里我们绘制的其实是一个圆形,只是因为填充图像在不停的旋转,且展示的图像不同就看起来有了立体效果。

void paint(Canvas canvas, Size size) {
    var paint = Paint();
    paint.style = PaintingStyle.fill;
    paint.shader = ImageShader(
      image,
      TileMode.mirror,
      TileMode.mirror,
      (Matrix4.identity()
            ..translate(5 * animationValue, 5 * animationValue)
            ..scaled(0.5)
            ..rotateZ(2 * pi * animationValue))
          .storage,
      filterQuality: FilterQuality.high,
    );
    Offset center = Offset(size.width / 2, size.height / 2);
    canvas.drawCircle(center, 200, paint);
}

下图是换了星球图片的运行效果,大家也可以调整 ImageShader 的参数看看其他参数的效果。

总结

源码已经提交至:绘图相关源码,文件名为:image_shader_demo.dart。本篇介绍了 Flutter 绘图使用 ImageShader 填充图形,并且利用 Matrix4的三维变换加上动画实现了立体旋转的动画效果。随着对 Flutter 绘图的深入,我们会发现绘图覆盖的面非常广,也能够实现更多有趣的效果。

以上就是Android利用Flutter实现立体旋转效果的详细内容,更多关于Android Flutter立体旋转的资料请关注我们其它相关文章!

(0)

相关推荐

  • Android酷炫动画效果之3D星体旋转效果

    在Android中,如果想要实现3D动画效果一般有两种选择:一是使用Open GL ES,二是使用Camera.Open GL ES使用起来太过复杂,一般是用于比较高级的3D特效或游戏,并且这个也不是开源的,像比较简单的一些3D效果,使用Camera就足够了. 一些熟知的Android 3D动画如对某个View进行旋转或翻转的 Rotate3dAnimation类,还有使用Gallery( Gallery目前已过时,现在都推荐使用 HorizontalScrollView或 RecyclerVi

  • flutter RotationTransition实现旋转动画

    本文实例为大家分享了flutter RotationTransition实现旋转动画的具体代码,供大家参考,具体内容如下 flutter 动画状态监听器 AnimationController //动画控制器 AnimationController controller; //AnimationController是一个特殊的Animation对象,在屏幕刷新的每一帧,就会生成一个新的值, // 默认情况下,AnimationController在给定的时间段内会线性的生成从0.0到1.0的数字

  • Flutter 控制屏幕旋转的实现

    最近需要做个平板的项目,然后需要直接横屏,有2种实现方式. 1, 随着屏幕旋转,布局自动调整.做横竖屏适配 2,强制屏幕横屏,不随着屏幕去调整 第一种方式这里就不做说明了.代码做适配就可以. 下面说一下第二种实现方式 Flutter 自带方式 flutter 为我们提供了方法来控制系统的横竖屏显示 SystemChrome.setPreferredOrientations([ DeviceOrientation.landscapeLeft, DeviceOrientation.landscape

  • Android实现旋转动画

    本文实例为大家分享了Android实现旋转动画的具体代码,供大家参考,具体内容如下 旋转动画(可加速.减速) 1.准备工作 首先需要有一个用于旋转的图片 需要考虑如何开始.结束.加速.减速 2.加速减速原理 本次的动画采用RotateAnimation,初始化需要的参数如下 public RotateAnimation(float fromDegrees,float toDegrees,int pivotXType,float pivotXValue,int pivotYType, float

  • Android绘制旋转动画方法详解

    目录 1.准备工作 2.加速减速原理 3.初始化 4.开始 5.加速 6.减速 7.停止 8.项目源码 Layout部分 MainActivity部分 1.准备工作 首先需要有一个用于旋转的图片 需要考虑如何开始.结束.加速.减速 2.加速减速原理 本次的动画采用RotateAnimation,初始化需要的参数如下 public RotateAnimation(float fromDegrees,float toDegrees,int pivotXType,float pivotXValue,i

  • Android编程实现3D立体旋转效果的实例代码

    说明:之前在网上到处搜寻类似的旋转效果 但搜到的结果都不是十分满意 原因不多追述(如果有人找到过相关 比较好的效果 可以发一下连接 一起共同进步) 一 效果展示 : 如非您所需要的效果 也希望能给些微帮助 具体操作以及实现 效果 请看项目例子 二 使用方式 此空间继承与FrameLayout 子空间直接添加如同framelayout 相同 如要如图效果 唯一要求子空间必须位于父控件中心且宽高等大小 为了方便扩展而做 如有其他需求可自行更改 (注 所有子控件 最好添加上背景 由于绘制机制和动画原因

  • Android利用Flutter实现立体旋转效果

    目录 前言 ImageShader 简介 构建 ui.Image对象 使用 ImageShader 填充形状 立体旋转效果实现 总结 前言 之前我们提到了 CustomPaint er 的 Paint 可以使用渐变(GradientShader)来填充绘制的图形,本篇我们来介绍使用图片填充,并且配合动画实现“立体”旋转效果,之所以给“立体”加上引号,是因为实际是通过填充图片自身的光影效果旋转后看起来像是立体效果一样.下面是实现的效果图. ImageShader 简介 ImageShader 的定

  • Android利用Flutter path绘制粽子的示例代码

    目录 前言 绘制 基本轮廓 粽叶 嘴巴 眼睛 腮红 手&脚 头巾 咸甜是一家 发声 动画控制嘴巴开合 用到的技术点 总结 前言 大家好,端午将至,首先提前祝小伙伴端午安康,端午作为中华民族的非常重要的传统节日,粽子那是必不可少的,但是你真的知道粽子的历史吗? 今天跟随本篇文章用Flutter path画一个会科普节日的的粽子吧- 绘制 基本轮廓 首先我们需要将粽子的基本轮廓绘制出来,通过图片可以看到粽子的轮廓是一个圆圆的三角形状, 本篇文章所有的图形都是用纯Path路径制作,这里我们可以将粽子的

  • Android利用Camera实现中轴3D卡牌翻转效果

    在Android系统API中,有两个Camera类: android.graphics.Camera android.hardware.Camera 第二个应用于手机硬件中的相机相关的操作,本文讲述的是利用第一个Camera类实现中轴3D转换的卡牌翻转效果,开始之前,先看一下Android系统中的坐标系: 对应于三维坐标系中的三个方向,Camera提供了三种旋转方法: rotateX() rotateY() rotateX() 调用这三种方法,传入旋转角度参数,即可实现视图沿着坐标轴旋转的功能.

  • Android利用贝塞尔曲线绘制动画的示例代码

    目录 彩虹系列 弹簧动画 复杂立体感动画 总结 前面我们花了几篇介绍了贝塞尔曲线的原理和绘制贝塞尔曲线,着实让我们见识到了贝塞尔曲线的美.好奇心驱使我想看看贝塞尔曲线动起来会是什么样?本篇就借由动画驱动贝塞尔曲线绘制看看动起来的贝塞尔曲线什么效果. 彩虹系列 通过动画控制绘制的结束点,就可以让贝塞尔曲线动起来.例如下面的动图展示的效果,看起来像搭了一个滑滑梯一样.实际上就是用7条贝塞尔曲线实现的,我们使用了 Animation 对象的值来控制绘制的结束点,从而实现了对应的动画效果. 具体源码如下

  • 利用Flutter实现“孔雀开屏”的动画效果

    前言 今天分享一个类似"孔雀开屏"的动画效果,打开新的页面时,新的页面从屏幕右上角以圆形逐渐打开到全屏. 先来看下具体的效果 不知道这种效果大家叫什么名字?如果有更合适的名字可以在评论处告诉我,下面来说下如何实现此效果. 在使用Navigator进入一个新的页面时,通常用法如下: Navigator.of(context).push(MaterialPageRoute( builder: (context){ return PageB(); } )); MaterialPageRout

  • Android利用ScaleTransition实现吹气球动画

    目录 前言 ScaleTransition 介绍 应用 总结 前言 这是最后一篇介绍如何使用基本动画组件的文章,我们继续 Transition 的动画,本篇来介绍 ScaleTransition.我们在之前的文章介绍过使用 Animation 和 AnimationController 来实现组件的缩放,那是通过更改图片的尺寸实现的,具体可以参考:Flutter 实现爱心三连动画. 而对于只需要放大或缩小的场合,可以直接使用 ScaleTransition 来完成,例如我们本篇实现了一个气球从小

  • Android利用Hero实现列表与详情页无缝切换动画

    目录 前言 思路 列表元素 详情页面 源码 总结 前言 介绍了几篇 Hero 动画,我们来一个 Hero 动画应用案例.在一些应用中,列表的元素和详情的内容是一致的,这个时候利用 Hero 动画切换到详情会感觉无缝过渡,用户体验会更好.例如本篇我们要实现下面的效果: Hero 应用:列表与详情切换 思路 上面的效果是列表和详情共用了头像和头像的背景色.二者的组合是一个 Stack 组件,因此可以使用 Hero 组件完成.然后是 Hero 组件的移动,我们先做了水平移动,再做垂直方向移动,这样过渡

  • 利用Flutter绘制出3D效果动画

    目录 前言 Path 的 transform 方法 绕任意点旋转 卡片3D 旋转实现 日历翻页效果 总结 前言 本篇我们继续介绍 Flutter 绘图的 Path 的应用.Flutter 的 Path 类提供了一个三维空间的变换方法,可以实现路径在三维空间的平移.旋转等操作,从而可以实现3D 绘制的效果.通过本篇你将了解到: Path的三维转换方法 transform 的使用. 绕三维空间某一点的旋转实现. 卡片3D 旋转动效. 类似日历的三维翻页效果. Path 的 transform 方法

  • 利用Flutter制作经典贪吃蛇游戏

    目录 前言 使用 Flutter 作为游戏引擎 画蛇 2D 渲染的基础 创建蛇 填写列表 将蛇移动到下一个位置 添加运动和速度 添加控件 改变方向 吃东西和提高速度 在屏幕上显示食物 消耗和再生食物 检测碰撞并显示游戏结束对话框 添加一些收尾工作 重启游戏 显示分数 前言 Flutter (Channel stable, 2.10.3, on Microsoft Windows [Version 10.0.19044.1586], locale zh-CN) Android toolchain

随机推荐