CocosCreator项目实战（15）：动画与音效

---

一、动画

1. 需要新增加动画的地方有三处：1）新生成数字块时；2）数字块合并时；3）显示排行榜时。可参考cc.tween官方文档。
2. 新生成数字块时。修改game.js的addBlock()方法。

    addBlock() {
		...
        if (locations.length == 0) {
			...
        } else {
			...
            cc.tween(block)
                .to(ANIMATION_DURATION, { scale: 0.75 })
                .to(ANIMATION_DURATION, { scale: 1 }, { easing: 'backOut' })
                .start();
			...
        }
    },

3. 数字块合并时。修改moveDirection(direction)方法。

    moveDirection(direction) {
		...
        let move = (x, y, callback) => {
			...
            if (condition || this.data[x][y] == 0) {
				...
            } else if (this.data[destX][destY] == 0) {
                // Move
				...
            } else if (this.data[destX][destY] == this.data[x][y]) {
                // Merge
                cc.tween(this.blocks[destX][destY])
                    .to(ANIMATION_DURATION, { scale: 1.25 })
                    .to(ANIMATION_DURATION, { scale: 1 }, { easing: 'backOut' })
                    .start();
				...
            } else {
				...
            }
        };
		...
    },

4. 显示排行榜时。修改showRanks()方法。

    showRanks() {
        ...
        cc.tween(this.rankBox)
            .to(ANIMATION_DURATION, { scale: 1.05 })
            .to(ANIMATION_DURATION, { scale: 1 }, { easing: 'backOut' })
            .start();
    },

5. 实际预览后，发现效果不佳会产生卡顿的感觉，修改将这三个动画封装为一个函数showAnimation(object)，并修改MOVE_DURATION的值。

const MOVE_DURATION = 0.02;
	...
    showAnimation(object) {
        cc.tween(object)
            .to(0.06, { scale: 1.1 })
            .to(0.06, { scale: 1 })
            .start();
    },

6. 在微信开发者工具中预览可得。

---

二、音效

1. 下载点击音效，拷贝至assets\sound目录下，在restartButton下新建一个clickSound节点，添加AudioSource组件，将click.mp3拖至Clip栏。

2. 在restartButton中将Button组件中的Click Event改为1，cc.Node选择clickSound节点，组件为cc.AudioSource，方法为play。

3. 其他按钮同理，但实际预览过程中，返回按钮并不能听到声音。原因是声音事件还没有触发，相关box的active为false了，因此修改AudioSource相关代码。
4. 在properties中添加clickSound，并与Canvas绑定，在按钮触发的相关方法中调用play()方法即可。

    properties: {
		...
        clickSound: cc.AudioSource,
    },
    ...
    restart() {
    	...
        this.clickSound.play();
    },

---