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();
    },

---