flutter对对碰小游戏APP技术总结之Flare动画

 浆糊之家   2020-05-20 22:43   23 views 热度值

业余空闲时制作了一个简单的2D开心乐小游戏,本文主要讲解一些重点核心关键点实现,相关关键实现技术讲解完,相信应该你们也可以完全动手实现一个类似的小游戏玩玩的!

前提:你必须会在flutter组件使用,以了解过flutter的相关动画组件,这样更容易理解。

先发体验地址及仓库

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

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

基础概要

实现这样一款简单的小游戏,主要核心是实现一个旋转双面的卡牌、一个可以控制的表情小脸蛋,如果对某块技术点感兴趣的话留言提出来,我会在空闲时间逐个技术分析总结,相对会较慢一点。

可控制的表情实现

Flare动画是什么?

它就类似动画设计网站,可以为App、游戏和网页制作矢量动画模型。
当你制作好了动画模型,是可以在flutter中控制某个动画运行指定帧数,以达到酷炫动画效果,并且能够完全hold控制住动画流程。

Flare制作网站地址:https://rive.app

设计师可直接在rive网站制作 相应设计稿及动画,使得工程技术人员更好的协同工作,下面看一段使用Rive和Flutter结合的交互效果视频,在登录界面中通过加入flare矢量动画,让界面变的栩栩如生。

PS: 请准备好墙外环境,才能看到如下视频:

flutter基础页面搭建

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

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

PS:注意要有node环境哦,可以网上下载一个node环境安装包,如果怕麻烦就自己手动创建一个flutter空页面也是一样的。

2、进入创建好的项目文件夹内,安装插件及启动项目

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

可控制的动态表情实现

Flare动画导入flutter页面

1、flr人脸动画素材下载地址》》https://rive.app/a/tec8297729/files/flare/face

进入地址后右上角导出flr文件动画后面使用。关于怎样制作Flare动画可以查看相关资料,蛮多文章讲解的蛮细的。

PS:这里我们使用网上制作好的素材,降低一些技术门槛,对于一些小伙伴门在学flr制作可能又是很长一篇文章了。但有兴趣的小伙可以查阅一下资料自己在搞一个动画。

2、把下载好的flr文件拷贝到APP根项目中的asset目录中去,接着配置pubspec.yaml文件指定静态资源文件,配置如下:

3、flr动画组件默认是不支持直接使用的,需要安装一下第三方插件库flare_flutter,在pubspec.yaml文件如下。

3、在home页面组件中引用flr动画表情

此时flr动画初始形态已经出来,如下:

flutter对对碰小游戏APP技术总结之Flare动画 flutter 第4张

另外在补一下flr动画网站上,二处位置的含义。

添加表情动画控制器

目前动画还是不会动的,这时候我们要拿到动画控制器的类,然后才能控制它,开始改造

1、插件有提供FlareController控制抽象类,需要自己实现里面的方法,在Home组件文件中创建components/FlareRateController.dart 文件

2、在home页面组件中引入控制器,并且制作一个滑块,用来测试动画,代码如下:

此时只是先把测试组件滑块,和控制器加入进来,还不能控制!下一步就开始控制flr动画了。

3、关联控制器让动画表情动走来,改造sliderWidget小组件方法,加入更新动画方法

PS: 这里需要说明一下 _flareRateController类上面是有一个更新动画的方法updataPercent,之前上面我们实现了一个控制flr动画的FlareController抽象类。

以免到了这一步就晕了,为什么会有这个方法,这个并不是控制器自带的哦!而自己实现方法暴露出来供更新动画用的。

此时就能自由控制动画表情了,效果如下:

改造成小脸蛋

我们现在要对动画进行好好的包装一下,让他更加生动有灵魂,有感情。

1、还是在home页面组件中,添加一个圆形组件对之前flr组件包裹起来

此时也有个小像样的脸蛋了,但我们还要在接着融入一丢丢感情色彩进来。

2、对表情加入动态颜色情感表达,对_buildFlareActor组件改造,添加颜色区间值。

此时表情有了颜色的装饰,但总感觉还是少了点什么???

似乎是有那么点味道,那咱们在加点生气情感表达一下咯,开干。

3、对表情添加生气的时特殊效果,这里想到用振动效果来阐述生气,改造home组件,添加AnimationController控制器等

添加完animate控制器一些函数后,下面要结合在表情组件中一起使用了,需要在改造_buildFlareActor组件、faceFLr组件。

4、_buildFlareActor组件、faceFLr组件改造,具体添加了Transform让期有运动起来,并且滑动控制器也改改逻辑,代码如下:

此时表情有点feel了,那么我们不用滑动组件,搞几个按钮直接显示你想要的表情状态。

5、加入几个按钮直接跳入某个表情中去。在home中添加几个btn组件,代码如下:

此时看效果就相对比较生动,且有点灵魂了。

此时小脸蛋的核心技术完结,home组件的完整代码如下:

另外源码放在hh_game的仓库flrdemo分支上了,https://github.com/tec8297729/hh_game/tree/flrdemo

flutter双面旋转卡牌技术总结

 发表评论


表情