曉石頭的部落格

郵箱：[email protected]

滑鼠點選一次，卡牌蓋住

再次點選，卡牌翻開

效果演示圖

之前一直認為卡牌翻轉是通過幀動畫實現的，當看到@笨木頭用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++;
}
 

原始碼免積分下載地址：

程式碼一：卡牌翻轉效果的實現（只有當滑鼠點中卡牌才翻轉）

程式碼二：卡牌翻轉效果的實現（有點選事件就翻轉）

對比學習會對觸控事件有更深入的理解。