flutter双面旋转卡牌技术总结

 浆糊之家   2020-05-28 23:53   4 views 热度值

这次总结游戏中的双面的旋转卡牌实现效果,先从单面旋转到双面旋转的具体实现过程,一个有视觉3D效果的动画在flutter中首先想到的就是矩阵,通过改变轴心的位置让用户看起来很有立体的感觉。

先回顾一下游戏中的卡牌效果是什么样的,如下:

先发体验地址及仓库

github地址:https://github.com/tec8297729/hh_game

APP扫码下载体验,密码:111111

矩阵知识概念

flutter的小伙伴们,如果还没接触学习到矩阵就要先补一波知识点

实现绘制矩阵特效是通过Transform组件实现的,此组件中会有一个transform参数,而此参数就需要用到Matrix4矩阵(4D),它提供了对元素进行x/y/z轴的控制、视图距离等等方法

准备了几篇介绍矩阵相关的文章,不了解的同学可以先了解一下起!!

flutter官方文档Matrix4介绍》》传送门

Transform基础入门篇》》传送门

Matrix4矩阵变换进阶》》传送门

以下Transform组件视频介绍,请跨出墙外,你懂的

Matrix4矩阵用法

为了能快速融入此次旋转卡牌矩阵实现,针对部份矩阵知识点进行掌握讲解。

PS: 想要更全面的了解所有矩阵相关知识可以先查看上面介绍的文章及文档传送链接,矩阵Matrix3和Matrix4要说的东西还是比较多的,可能最终会偏理了主题方向。

好了开始进入正题:

1、Matrix4.identity() 创建生成一个矩阵

2、setEntry() 设置矩阵中的行、列、视图距离。。。第三个物体的视图距离相当于对着屏幕的远近,当越远时就看着此物体就会越全面,看着就如3D整体效果一样。

3、rotateY() 设置改变Y轴方向,像旋转卡牌其实只改变Y轴位置。

实现旋转卡牌

flutter基础页面搭建

首先就是搞一个flutter的基础页面环境出来,这里就不单个去写了,我就用现成的flutter_flexible脚手一键生成页面了(主要是便利快捷生成),毕竟主点是讲解动画技术。

PS:你也可以手动创建一个flutter空白页面,直接跳过此步骤。

1、输入命令安装脚手架cli,并且创建一个新的项目。

2、接着进入lib\pages\AppHomePage\Home\Home.dart 页面组件中,去除演示demo代码,准备好基础页面环境。代码如下:

2、找到lib\config\app_config.dart文件,配置一下跳过广告页面

实现单面的旋转卡牌

1、准备一些图片素材,可以在网上下载几张图片,或是直接使用hh_game仓库中的素材 ,把asset/eleItem目录中的所有文件复制一份入到自己的本地asset/eleItem目录中。

2、配置pubspec.yaml文件,把静态资源目录加入进来

3、创建一个带有背景的方块小部件,直接使用上面的背景素材,先使用其中一个,后续旋转卡牌都会用到这些素材。

此时在APP中可以看到带图片的组件了,但还需要在加入点击事件让它可以转起来。

4、开始让组件能动翻转起来,一共用到二个组件,AnimatedBuilder构建动画的组件,Transform用来构建矩阵旋转小部件的。

在home页面中加入AnimatedBuilder动画构建小部件,里面用的Transform小部件,让其静态部件动起来,例如Y轴变动

为了测试能否动起来,在_eleBox 封装的组件中加入变量测试一下,代码如下:

此时单面的卡牌旋转效果就有了,效果如下:

双面旋转卡牌实现

我们基于上面的单面的卡牌代码来改造,让它实现有二面的效果。

思考阶段

在跟着实现双面卡牌效果前,先自我独立思考一下,单面旋转卡牌效果实现了,在此基础上在改造成双面是否有思路实现呢???

旋转卡牌动起来,必然要调整角度,而角度是不是一个突然口呢!!在旋转卡牌中怎么获取旋转中的角度知道么?

建议先独立思考一下在跟着下面实现,打开思维想象空间,好好阅读单面卡牌实现的代码。

实现阶段

1、先创建一个双面卡牌的另一页显示的组件,其实也单面eleBox类似,只是换了一张背景图片

2、接着判断旋转的角度,来显示不同的eleBox组件
animation.value 动画的值是360,正好是旋转一圈的角度,那么180正好就是旋转了一半,根据值来改造。

3、改造maskEleBox和_eleBox二个组件点击事件,因为这二个组件事件都是一样的,所以把点击事件抽离出来

最终效果如下:


完整的代码如下:

扩展篇:生成九宫格随机图片

模拟来生成一个类似的游戏的宫格,里面随机图片

1、先把一个双面的旋转卡牌封装成一个独立组件,在Home\components\EleItemBox.dart 创建此文件,然后把在home内的代码转到此里面, 动态传入index来显示不同的图片

2、home页面组件内清空之前代码,引入封装好的组件

把之前的组件抽离封装后,开始进行生成多个。

3、下面来制作宫格块,动手能力强的小伙伴可以自己思考起尝试写写,封装的单个组件是有了,只是如何渲染多个出来。

实现代码如下:

最终效果如下:


此demo源码地址:https://github.com/tec8297729/hh_game/tree/eleboxDemo

往期相关文章技术总结

利用Flare动画实现可控制的表情

NEXT:已经是最新一篇了

 发表评论


表情