在游戏中，有时候为了通过一种有意思的途径，让用户在一些物品中随机获取某种物品，除了前面我们提到的使用大转盘抽奖获得，还有一种可以实现类似功能的是抽取卡片。

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)。

标题：CocosCreator之翻牌动画

作者：shirln

地址：https://www.mmzsblog.cn/articles/2019/08/09/1565360665278.html

-----------------------------

如未加特殊说明，此网站文章均为原创。

网站转载须在文章起始位置标注作者及原文连接，否则保留追究法律责任的权利。

公众号转载请联系网站首页的微信号申请白名单！

个人微信公众号 ↓↓↓