Cocos2D游戏之旅（三）：卡牌翻转效果的实现（上）

晓石头的博客

邮箱：178673693@qq.com

转载请注明出处，原文连接：/article/1322868.html



鼠标点击一次，卡牌盖住

再次点击，卡牌翻开



效果演示图
之前一直认为卡牌翻转是通过帧动画实现的，当看到@笨木头用ScaleTo做出来时候，再一次深刻体会到什么叫大道至简。
一、先谈思路

一共两张图片

1、正面



2、背面



第一步：将正面的宽度慢慢缩小至0；产生卡牌翻转到中间的效果

第二步：将一开始就把宽度缩小至0的背面放大到正常，产生卡牌盖住的效果

嘿嘿，是不是一种恍然大悟的感觉！^_^

二、再说实现

bool HelloWorld::init()
{
    if (!Layer::init())
    {
        return false;
    }
    Size visibleSize = Director::getInstance()->getVisibleSize();

	//添加背景
	CCSprite* bk = CCSprite::create("bk.png");
	bk->setPosition(Point(visibleSize.width / 2, visibleSize.height / 2));
	this->addChild(bk);

	//cardFlag为偶数时，表示牌翻开，否则盖上
	cardFlag = 0;

	//触摸事件
	EventListenerTouchOneByOne* event = EventListenerTouchOneByOne::create();
	event->setSwallowTouches(true);
	event->onTouchBegan = CC_CALLBACK_2(HelloWorld::onTouchBegan, this);
	event->onTouchMoved = CC_CALLBACK_2(HelloWorld::onTouchMoved, this);
	event->onTouchEnded = CC_CALLBACK_2(HelloWorld::onTouchEnded, this);
	_eventDispatcher->addEventListenerWithSceneGraphPriority(event, this);

	/* 创建第一个精灵 */
	sprite1 = Sprite::create("card.jpg");
	sprite1->setPosition(Point(visibleSize.width / 2, visibleSize.height / 2));
	this->addChild(sprite1);

	/* 创建第二个精灵 */
	sprite2 = Sprite::create("bkCard.png");
	sprite2->setPosition(Point(visibleSize.width / 2, visibleSize.height / 2));
	this->addChild(sprite2);

	/* 第二个精灵默认x拉伸至0.0，于是第二个精灵在一开始是看不见的*/
	sprite2->setScaleX(0.0f);

    return true;
}

void HelloWorld::closeCard()
{
	/* x方向拉伸至0的动作 */
	ScaleTo* scaleToHide = ScaleTo::create(0.6f, 0.0f, 1.0f);

	/* 创建卡牌放大的回调函数 */
	auto funcScaleToShow = [=](){
		ScaleTo* scaleToShow = ScaleTo::create(0.6f, 1.0f, 1.0f);
		sprite2->runAction(scaleToShow);
	};

	/* 将回调函数封装为动作 */
	CallFunc* callFuncSpr2 = CallFunc::create(funcScaleToShow);

	/* 依次执行动作 */
	Sequence* sequence = Sequence::create(scaleToHide, callFuncSpr2, NULL);

	sprite1->runAction(sequence);
}

void HelloWorld::openCard()
{
	/* x方向拉伸至0的动作 */
	ScaleTo* scaleToHide = ScaleTo::create(0.6f, 0.0f, 1.0f);

	auto funcScaleToShow = [=](){
		ScaleTo* scaleToShow = ScaleTo::create(0.6f, 1.0f, 1.0f);
		sprite1->runAction(scaleToShow);
	};

	CallFunc* callFuncSpr1 = CallFunc::create(funcScaleToShow);
	Sequence* sequence = Sequence::create(scaleToHide, callFuncSpr1, NULL);

	sprite2->runAction(sequence);
}

bool HelloWorld::onTouchBegan(Touch *touch, Event *unused_event)
{
	return true;
}
void HelloWorld::onTouchMoved(Touch *touch, Event *unused_event)
{

}

void HelloWorld::onTouchEnded(Touch *touch, Event *unused_event)
{
	/* cardFlag为偶数则盖住卡牌，基数则打开卡牌 */
	if (0 == cardFlag%2)
	{
		closeCard();
	}
	else
	{
		openCard();
	}
	cardFlag++;
}

源代码免积分下载地址：

代码一：卡牌翻转效果的实现（只有当鼠标点中卡牌才翻转）

http://download.csdn.net/detail/qiulanzhu/8957267

代码二：卡牌翻转效果的实现（有点击事件就翻转）

http://download.csdn.net/detail/qiulanzhu/8954611

对比学习会对触摸事件有更深入的理解。