由于項目需要實現翻牌的效果，所以自己在完成的過程中將這篇文章寫下來，想想還是覺得有點艱辛。 開始在網上找解決的辦法找了很久，基本上就是一種解決方案，就是用CCOrbitCamera這個Action類來模擬實現翻牌的效果。 但是我在使用的效果中始終不如人意。 用CCOrbitCamera類實現倒是能實現，但是如果將牌移動到左上、左下或者其他不在屏幕中心的位置那這個效果就不行了，翻牌的位置就錯誤了，類似3D的了。 找了半天終于知道是什么原因了，Cocos2dX里面有這樣的一句話， CCDirector::sharedDirector()->setProjection(kCCDirectorProjection3D); 就是這個3D，Cocos2DX支持透視投影和正交投影兩種模式，于是乎我把kCCDirectorProjection3D改成kCCDirectorProjection2D，對了，有感覺了。 這樣一設置翻牌的動作就不是3D感了，就是正常的這種翻牌的感覺了。 但是項目中其他的圖片出現了鋸齒，這就不能忍了。 在用了很多辦法都不能消除鋸齒的時候我嘗試到去讀Cocos2dx關于設置setProjection函數的內容，看是否能夠將鋸齒避免，讓翻轉變得自然。 最終我失敗了，確實還是太菜了不行。 我于是找替代方案來實現翻牌的動作，就找到了CCScaleTo來實現，這過程確實還是比較艱辛。 下面我把兩種方案的關鍵代碼都貼出來，方便大家看看吧。 1. 首先還是用CCOrbitCamera類實現翻牌的效果（我封裝成了一個函數）。 ~~~ void HelloWorld::showObtAniUseOrbitCamera( CCSize visibleSize ) { if (m_pCardFront != NULL){ this->removeChild(m_pCardFront); } if (m_pCardBack != NULL){ this->removeChild(m_pCardBack); } // 加載牌的正反兩面 m_pCardFront = CCSprite::create("CardFront.png"); m_pCardBack = CCSprite::create("CardBack.png"); /*m_pCardFront->setPosition(ccp(visibleSize.width/2-100,visibleSize.height/2+100)); m_pCardBack->setPosition(ccp(visibleSize.width/2-100,visibleSize.height/2+100));*/ m_pCardFront->setPosition(ccp(visibleSize.width/2,visibleSize.height/2)); m_pCardBack->setPosition(ccp(visibleSize.width/2,visibleSize.height/2)); this->addChild(m_pCardFront,5); this->addChild(m_pCardBack,5); // 動畫序列（延時，顯示，延時，隱藏） CCSequence *pBackSeq = CCSequence::create(CCDelayTime::create(0.5f),CCShow::create(),CCDelayTime::create(0.5f),CCHide::create(),NULL); //持續時間、半徑初始值、半徑增量、仰角初始值、仰角增量、離x軸的偏移角、離x軸的偏移角的增量 CCOrbitCamera *pBackCamera = CCOrbitCamera::create(1.0f, 1, 0, 0, -90, 0, 0); CCSpawn* pSpawnBack = CCSpawn::create(pBackSeq,pBackCamera,NULL); m_pCardBack->runAction(pSpawnBack); // 動畫序列（延時，隱藏，延時，顯示） CCSequence *pFrontSeq = CCSequence::create(CCDelayTime::create(0.5f),CCHide::create(),CCDelayTime::create(0.5f),CCShow::create(),NULL); CCOrbitCamera *pLandCamera = CCOrbitCamera::create(1.2f, 1, 0, 0, -360, 0, 0); CCSpawn* pSpawnFront = CCSpawn::create(pFrontSeq,pLandCamera,NULL); m_pCardFront->runAction(pSpawnFront); } ~~~ 上面的注釋寫得比較詳盡了，其實不難，就是背面顯示的時候把正面隱藏，正面顯示了把背面隱藏，就是這么個事。 這里面有個-90,-360是旋轉的角度，可以自己嘗試改了看會有什么效果。 下面是運行的效果圖：   就是這樣由背面翻轉到正面，但注意，在“3D模式”下，position是設置在屏幕中間才會有這個效果，如果設置在其他位置就不是這個效果了，可以自己試試。 如果設置成2D模式就不會有這個情況了，但是不知道你自己的項目圖片會不會出現鋸齒，出現鋸齒的情況我沒有找到解決的辦法。 2. 用CCScaleTo實現的翻轉 就是因為有鋸齒的情況出現我又沒解決到，所以我在需找替代方案，于是乎找到了CCScaleTo來實現。 下面是關鍵的代碼： ~~~ void HelloWorld::showObtAniUseScaleTo(CCSize visibleSize) { if (m_pCardFront != NULL){ this->removeChild(m_pCardFront); } if (m_pCardBack != NULL){ this->removeChild(m_pCardBack); } // 加載牌的正反兩面 m_pCardFront = CCSprite::create("CardFront.png"); m_pCardBack = CCSprite::create("CardBack.png"); // 把牌反轉了 m_pCardFront->setFlipX(true); m_pCardFront->setPosition(ccp(visibleSize.width/2-100,visibleSize.height/2+100)); m_pCardBack->setPosition(ccp(visibleSize.width/2-100,visibleSize.height/2+100)); this->addChild(m_pCardFront,5); this->addChild(m_pCardBack,5); // 動畫序列（延時，隱藏，延時，隱藏） CCSequence *pBackSeq = CCSequence::create(CCDelayTime::create(0.5f),CCHide::create(),CCDelayTime::create(0.5f),CCHide::create(),NULL); CCScaleTo* pScaleBack = CCScaleTo::create(1.2f,-1,1); CCSpawn* pSpawnBack = CCSpawn::create(pBackSeq,pScaleBack,NULL); m_pCardBack->runAction(pSpawnBack); // 動畫序列（延時，顯示，延時，顯示） CCSequence *pFrontSeq = CCSequence::create(CCDelayTime::create(0.5f),CCShow::create(),CCDelayTime::create(0.5f),CCShow::create(),NULL); CCScaleTo* pScaleFront = CCScaleTo::create(1.2f,-1,1); CCSpawn* pSpawnFront = CCSpawn::create(pFrontSeq,pScaleFront,NULL); m_pCardFront->runAction(pSpawnFront); } ~~~ 這里主要就是要先把牌的正面setFlipX(true)這個函數來翻轉一下，然后再繞Y軸模擬個旋轉出來，如果還是不怎么清楚還請看官自己寫代碼試試效果。 CCScaleTo參數的設置主要就是為了繞Y來旋轉，具體的各種情況也可以自己試試效果，實踐是檢驗真理的唯一標準嘛，可以設置成(1,1),(1,-1)等等試試效果。 好了，差不多就是這樣一個情況。 可以自己試試寫個HelloWord調效果，加深印象。