点击蓝色字关注我们！
一个努力中的公众号
长的好看的人都关注了
在游戏中，有时候为了通过一种有意思的途径，让用户在一些物品中随机获取某种物品，除了前面我们提到的使用大转盘抽奖获得，还有一种可以实现类似功能的是抽取卡片。
描述
抽卡界面打开时，向用户展示所有卡片的背面，待用户随机点一张卡片后，该卡片会播放一个翻开的动画，然后显示卡片的相关描述等信息。
UI搭建
（1）新建一个Button组件，图片设置为牌的背面图
（2）复制5份，排列好，并依次名命如下；
效果图如下：
代码
（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）。
效果
注：以上效果为ps制作的帧动画输出的gif，并非实际效果。实际效果看上去会更协调一些。
如果你想学ps，可以扫描下方二维码，关注我们的公众号哦~
往期推荐
一。睡前一瞥，花花世界（三）
二。终于，我暴富了！！（二）
三。高考完，将何去何从？（一）