【CocosCreator】动画组件的使用-文字放大缩小动画

在每个房间的左上角都有一个数字,用来表示当前房间所拥有的货币数量,然后它有一个动画效果,就是当它的数值改变时,会放大再缩小,以此来提醒用户自身的值发生了改变。

可以通过动画组件Animation来实现上面说的效果。

构建静态节点

先把静态页面搞好,然后再给节点加组件。

我这里将房间room给抽离成了预制件,所以直接在预制件中进行修改了,在room下新增一个空的一级子节点,命名为coin,然后再coin下新增一个精灵图节点coin-sprite和一个文本节点coin-number,此时的room的结构如下:

这里要注意的是,我们要改变文本节点coin-number的锚点和水平对齐方式:

首先是锚点,默认锚点是 anchor(0.5,0.5),这样会导致文本从中间向两边增加,然后当数字位数较少的时候,会离图标较远,如下:

所以我们应该将锚点设置为 anchor(0,0.5),这样数字就会往右边增长了,如下:

至此,静态页面已经可以了,接下来开始制作动画组件。

动画组件

新建动画剪辑组件并且挂载

在左边的资源管理器,新建一个animation目录,用来管理我们的动画组件资源,然后选中该目录,右键,创建动画剪辑:

名称就命名为 zoom-out 吧。

新建完成后,选中coin节点,然后将资源管理器中的 zoom-out 拖动到右边的属性检查器面板中,完成组件的添加。

动画组件的编辑

此时点击场景编辑器中的动画(注意,coin节点要处于选中状态,因为我们是把动画组件挂载到了coin节点上),进入动画编辑模式:

然后要明确的是,放大缩小改变的是节点的scale属性值,因此在动画编辑模式中,我们选中coin节点,点击下面的属性,添加scale属性:

然后就是,我们需要在第0帧、第10帧、第20帧的位置分别打上一个关键帧,操作步骤如下:

然后就是改变关键帧处的缩放值了,第0帧处的scale值为 scal(1,1),无变化,然后第10帧处的则是 scal(1.2,1.2),然后第20帧的又变回 scale(1,1),这样就实现了一个先放大后缩小回原始大小的动画了。

可以通过选择循环模式后,点击播放来查看动画效果:

至此,动画组件完成,下面要通过代码调用动画组件播放动画。

代码控制动画组件播放

想要通过代码控制动画组件进行动画播放,可以通过 getComponent(Animation) 获取动画组件(前提是当前节点下有且只有一个动画组件,因为这个方法只获取第一个类型匹配的组件),然后执行动画组件的play方法即可。

比如说我这里,通过room节点的 room-control.ts 组件,获取到其下面的coin节点,然后我定义了一个changeCoin方法,用来改变房间的货币值,每次改变的时候,都会去执行一次动画播放,代码如下:

ts 复制代码
/**
 * 改变房间货币数量
 * @param { Number } num 要改变的数量 
 */
changeCoin(num) {
	this.coinNumber += num
	const coinNumber = this.coin.getComponentInChildren(Label)
	coinNumber.string = this.coinNumber + ''
	this.coin.getComponent(Animation).play()
}

为了看到效果,我在start生命周期中,每秒钟调用一次changeCoin方法:

ts 复制代码
start() {
	this.coin = this.node.getChildByName('coin') // 获取货币节点
	this.node.on(Node.EventType.TOUCH_END, () => {
		this.selectRoom()
	})
	this.schedule(() => {
		this.changeCoin(1)
	}, 1)
}

最后在页面上看到的效果如下:

相关推荐
web守墓人40 分钟前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L1 小时前
CSS知识复习5
前端·css
许白掰1 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子5 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
中微子6 小时前
React 状态管理 源码深度解析
前端·react.js
加减法原则7 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele8 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4538 小时前
React移动端开发项目优化
前端·react.js·前端框架
你的人类朋友8 小时前
🍃Kubernetes(k8s)核心概念一览
前端·后端·自动化运维
web_Hsir8 小时前
vue3.2 前端动态分页算法
前端·算法