#夏日挑战赛#【FFH】canvas帧动画及封装(OpenHarmony JS UI) 原创 精华
本文正在参加星光计划3.0–夏日挑战赛
#夏日挑战赛#【FFH】canvas帧动画及封装(OpenHarmony JS UI)
Demo展示
这里以Tom猫(多年前热门的移动端互动小游戏)为例:
实现思路
首先要了解帧动画播放的原理——正如我们平时看电视看视频,视频通过每一帧图片按顺序快速切换来产生“动”起来的效果。
因此可以通过canvas组件提供的drawImage加定时器的方法来实现快速绘帧、渲染的效果。
代码封装
(这里我封装在model的cv.js)
当项目中有很多动画播放的地方,代码需要复用,就要把播放动画的代码封装起来,以便提供给其它页面或组件调用,减少冗余代码量。
canvas绘制图像
首先先来看一下canvas如何绘制对象,以在页面onShow生命周期上绘制初始画面为例:
因为绘制的是2d图像,则先用let e1e = this.$refs.canvas_1获取画布。let ctx = e1e.getContext(‘2d’)设置为’2d’,返回值为2D绘制对象,该对象可用于在画布组件上绘制矩形、文本、图片等。注意getContext不支持在onInit和onReady生命周期中进行调用。
下面是官方给出的aip文档:
动画播放
播放动画大致能分成三步:
- 获取画布及待播放动画信息
- 动画预加载
- 动画播放
这里选择以下方式储存动画对象信息:
通过id匹配动画信息:
匹配后进行预加载:
传入加载好的数组进行动画播放:
------注意(drawImage)每绘制一次需要手动清除(clearRect)上一张的图片,不然上一张图片会存留在页面中。
对外提供的接口:
代码调用
本例子展示的是Tom猫的两种动作:eat和knock,通过点击不同部位按钮的方式完成交互。
这里获取动作id的方法是通过按钮(在CSS中设置成透明)点击后获取按钮元素属性id,也可以用其它方式如 屏幕坐标判断 等方式自行定义id。
导入封装好的cv.js模块和接口
这样就通过调用封装好的动画播放完成了一个小Demo,可以看到渲染页面的代码量很少。
牛蛙牛蛙
怎么能让帧数多一点,更流畅?