曉石頭的部落格

郵箱：[email protected]

上篇講解了用ScaleTo縮放卡牌，達到翻轉的效果。

條條大道通羅馬，RotateBy 旋轉卡牌同樣能夠實現，而且效果更棒，就看你喜歡哪種了！

效果對比圖

一、先談思路：

用ScaleTo縮放卡牌實現翻轉的思路移步：

理解了ScaleTo 的思路，再看RotateBy 就一目瞭然了。

一共兩張圖片

1、正面

1、背面

產生卡牌蓋住的效果：

第一步：將正面旋轉90度；產生卡牌翻轉到中間的效果

第二步：將一開始就旋轉90度的背面再旋轉90度，產生卡牌蓋住的效果

產生卡牌翻開的效果：

第三步：將背面旋轉90度，背面隱藏起來。

第四步：正面有270度旋轉至360，恢復至卡牌開啟的原狀。

二、再說實現

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 = 0;
	touchable = 1;

	/* 建立第一個精靈 */
	sprite1 = Sprite::create("card.png");
	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旋轉至90度，於是第二個精靈在一開始是看不見的*/
	sprite2->setRotationY(90);
	

	/* 觸控事件 */
	EventListenerTouchOneByOne* event = EventListenerTouchOneByOne::create();
	/* true表示觸控事件不向下傳遞，如果有兩種重疊的卡牌，就只有第一張能接受到觸控事件。false則兩張卡牌都能接受到觸控事件 */
	event->setSwallowTouches(true);

	event->onTouchBegan = [=](Touch* touch, Event* event){
		/* 取出繫結的精靈 */
		auto target = static_cast<Sprite*>(event->getCurrentTarget());
		/* 將觸控點的螢幕座標轉換成openGL裡的座標 */
		Point point = Director::getInstance()->convertToGL(touch->getLocationInView());

		/* 判斷觸控點是否在精靈範圍內 */
		/* 在範圍為則返回true，執行onTouchEnded，否則false,不執行onTouchEnded */
		/* touchable控制觸控是否有效，避免動作執行完成前又觸控，產生動作混亂的效果 */
		if (target->getBoundingBox().containsPoint(point) && 1 == touchable)
		{
			touchable = 0;
			return true;
		}
		else
		{
			return false;
		}
	};

	event->onTouchEnded = [=](Touch* touch, Event* event){
		switch (cardFlag % 4)
		{
			/* 旋轉方式蓋住卡牌 */
		case 0:
			sprite2->setRotationY(90);
			sprite2->setScaleX(1.0f);
			closeCard();
			break;

			/* 旋轉方式開啟卡牌 */
		case 1:
			openCard();
			break;

			/* 縮放方式蓋住紙牌 */
		case 2:
			sprite2->setRotationY(0);
			sprite2->setScaleX(0.0f);
			closeCard2();
			break;

			/* 縮放方式開啟紙牌 */
		case 3:
			openCard2();

		default:
			break;
		}
		cardFlag++;

		auto funcSettouchable = [&](){
			touchable = 1;
		};

		CallFunc* callFuncTouch = CallFunc::create(funcSettouchable);

		/* 用順序動作保證動作完成後再讓觸控有效 */
		/* touchable用於控制觸控是否有效 */
		Sequence* sequence = Sequence::create(CCDelayTime::create(1.2f), callFuncTouch, NULL);
		this->runAction(sequence);
	};

	/* 註冊監聽事件，繫結精靈1 */
	_eventDispatcher->addEventListenerWithSceneGraphPriority(event, sprite1);
	/* 註冊監聽事件，繫結精靈2，事件監聽物件event複製了一份 */
	_eventDispatcher->addEventListenerWithSceneGraphPriority(event->clone(), sprite2);

    return true;
}

void HelloWorld::closeCard()
{
	/* x方向旋轉90度的動作 */
	RotateBy* rotateToHide = RotateBy::create(0.6f, 0, 90);

	/* 建立卡牌旋轉90度的回撥函式 */
	auto funcScaleToShow = [&](){
		RotateBy* rotateToShow = RotateBy::create(0.6f, 0, 90);
		sprite2->runAction(rotateToShow);
	};

	/* 將回調函式封裝為動作 */
	CallFunc* callFuncSpr2 = CallFunc::create(funcScaleToShow);

	/* 依次執行動作 */
	Sequence* sequence = Sequence::create(rotateToHide, callFuncSpr2, NULL);

	sprite1->runAction(sequence);
}

void HelloWorld::openCard()
{
	/* x方向旋轉90度的動作 */
	RotateBy* rotateToHide = RotateBy::create(0.6f, 0, 90);

	/* 建立卡牌旋轉90度的回撥函式 */
	auto funcScaleToShow = [=](){
		/* 這裡如果不這只是270度，卡牌翻轉後和原來的畫面是左右顛倒的 */
		sprite1->setRotationY(270);
		RotateBy* rotateToShow = RotateBy::create(0.6f, 0, 90);
		sprite1->runAction(rotateToShow);
	};

	/* 將回調函式封裝為動作 */
	CallFunc* callFuncSpr2 = CallFunc::create(funcScaleToShow);

	/* 依次執行動作 */
	Sequence* sequence = Sequence::create(rotateToHide, callFuncSpr2, NULL);

	sprite2->runAction(sequence);
}


void HelloWorld::closeCard2()
{
	/* 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::openCard2()
{
	/* 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);
}