翻牌動畫（CocosCreator）

推薦閱讀：

•  我的CSDN
•  我的博客園
•  QQ群：704621321

      在游戲中，有時候為了通過一種有意思的途徑，讓用戶在一些物品中隨機獲取某種物品，除了前面我們提到的使用大轉盤抽獎獲得，還有一種可以實現類似功能的是抽取卡片。

1.描述

      抽卡界面打開時，向用戶展示所有卡片的背面，待用戶隨機點一張卡片后，該卡片會播放一個翻開的動畫，然后顯示卡片的相關描述等信息。

2.UI搭建

（1）新建一個Button組件，圖片設置為牌的背面圖
（2）復制5份，排列好，並依次名命如下；

效果圖如下：

3.代碼

（1）聲明一個存放卡片的數組

this.cards = [];//卡片數組

（2）存儲卡片置數組中

for (let i = 0; i < 6; i++) 
{
    self.cards[i] = cc.find("card" + i, obj4);
}

(3)為卡片添加監聽事件

findBtn("card" + i, obj4, function () 
{
     self.turnCard(i);
})

(4)翻牌操作（翻牌動畫）

	///翻牌操作
    turnCard(idx) {
        var self = this;

        var scale1 = cc.scaleTo(0.1, 0, 1);
        var call1 = app.callFunc(function (adt) {
            self.flipCard(idx);
        }, [self.cards[idx]]);
        var scale2 = cc.scaleTo(0.1, 1, 1)

        self.cards[idx].stopAllActions();
        self.cards[idx].runAction(cc.sequence(scale1, call1, scale2));
    },

5翻牌后顯示牌正面：這里為了替換牌正面紋理的方便，我們將它保存在Resources/image/card/目錄下，並依次命名為1，2，3，4，5，將背面紋理圖片命名為0.

   //翻開某一張牌后顯示牌正面相關信息
    flipCardShow(idx) {
    	//--測試，根據需要賦值
    	let cardIdx=3；
        self.updateCardTexture(this.cards[idx], cardIdx);//更換牌的紋理 
        //顯示牌正面的其他信息
        //TODO
    },

修改紋理圖片方法：

 updateCardTexture(img, textureName) {
        cc.loader.loadRes("image/card/" + textureName, cc.SpriteFrame, function (err, spriteFrame) {
            if (!err) { img.getComponent(cc.Sprite).spriteFrame = spriteFrame; }
        });
    },

6.當關閉該翻牌面板時，需要將翻牌結果重置未未翻牌狀態

	//初始化牌
    initCard() {
        for (let i = 0; i < 6; i++) {
            gm.GameData.updateCardTexture(this.cards[i], "0");
        }
    },

至此，翻牌功能就實現了，寫這篇文章的主要目的是分享一個翻牌的動畫，即步驟（4）。