【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方法，用来改变房间的货币值，每次改变的时候，都会去执行一次动画播放，代码如下：

/**
 * 改变房间货币数量
 * @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方法：

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

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