場景和過渡

Scene 場景，是一個抽象的概念，僅被用作Node(節點)的一個子類。Scene (場景)和Node(節點)幾乎相同，不同的是Scene的默認錨點在屏幕的中心。

關於場景，不得不提的是場景之間的切換！效果挺炫的！下面看看33種切換效果，可以根據需要選擇和擴展。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

#ifndef __SceneTest__ #define __SceneTest__   #include "cocos2d.h" USING_NS_CC; class SceneTest : public Layer { public:     static Scene* createScene();     CREATE_FUNC(SceneTest);     virtual bool init();     bool onToucheBegans(Touch* touch,Event* ev); };   class SceneConfig { public:     static SceneConfig* getInstance();     int getIndex();     void setIndex(int index);     std::string getBg(); protected: private:             };   #endif   SceneTest.h

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116

#include "SceneTest.h"   static const char s_bg1[]="background1.png"; static const char s_bg2[]="HelloWorld.png"; #define str(name) #name  #define CL(classname) [](){auto scene = classname ::create(1.2f , SceneTest::createScene());log(str(classname));return scene;} #define CLN(classname) [](){auto scene = classname ::create(1.2f , SceneTest::createScene(),false);log(str(classname));return scene;} #define CLS(classname) [](){auto scene = classname ::create(1.2f , SceneTest::createScene(),ccc3(255, 0, 0));log(str(classname));return scene;} #define CLM(classname) [](){auto scene = classname ::create(1.2f , SceneTest::createScene(),TransitionScene::Orientation::LEFT_OVER);log(str(classname));return scene;}   static std::function<Scene*()> createFunctions[] = {     CL(TransitionJumpZoom),//作用： 創建一個跳動的過渡動畫      CL(TransitionProgressRadialCCW), //    作用： 創建一個扇形條形式的過渡動畫， 逆時針方向     CL(TransitionProgressRadialCW),//    作用： 創建一個扇形條形式的過渡動畫， 順時針方向     CL(TransitionProgressHorizontal),//    作用： 創建一個水平條形式的過渡動畫     CL(TransitionProgressVertical),//    作用： 創建一個垂直條形式的過渡動畫     CL(TransitionProgressInOut),//    作用： 創建一個由裏向外擴展的過渡動畫     CL(TransitionProgressOutIn),//    作用： 創建一個由外向裏擴展的過渡動畫     CL(TransitionCrossFade),//    作用：創建一個逐漸透明的過渡動畫     CL(TransitionFadeTR),//    作用：創建一個部落格過渡動畫， 從左下到右上     CL(TransitionFadeBL),//    作用：創建一個部落格過渡動畫， 從右上到左下     CL(TransitionFadeUp),//    作用：創建一個從下到上，條形摺疊的過渡動畫     CL(TransitionFadeDown),//    作用：創建一個從上到下，條形摺疊的過渡動畫     CL(TransitionTurnOffTiles),//    作用：創建一個隨機方格消失的過渡動畫     CL(TransitionSplitRows),//    作用：創建一個分行劃分切換的過渡動畫     CL(TransitionSplitCols), //    作用：創建一個分列劃分切換的過渡動畫     CL(TransitionShrinkGrow),//    創建一個放縮交替的過渡動畫     CL(TransitionRotoZoom),// 創建一個旋轉放縮交替的過渡動畫     CL(TransitionMoveInL),//    作用：創建一個從左邊推入覆蓋的過渡動畫     CL(TransitionMoveInR),//    作用：創建一個從右邊推入覆蓋的過渡動畫     CL(TransitionMoveInB),//    作用：創建一個從下邊推入覆蓋的過渡動畫     CL(TransitionMoveInT),//    作用：創建一個從上邊推入覆蓋的過渡動畫     CL(TransitionSlideInL),//    作用：創建一個從左側推入並頂出舊場景的過渡動畫     CL(TransitionSlideInR),//    作用：創建一個從右側推入並頂出舊場景的過渡動畫     CL(TransitionSlideInT), //    作用：創建一個從頂部推入並頂出舊場景的過渡動畫     CL(TransitionSlideInB),//    作用：創建一個從下部推入並頂出舊場景的過渡動畫     CLN(TransitionPageTurn),//    作用：創建一個翻頁的過渡動畫     CLS(TransitionFade),//    作用：創建一個逐漸過渡到目標顏色的切換動畫     CLM(TransitionFlipX),//    作用：創建一個x軸反轉的切換動畫     CLM(TransitionFlipY),//    作用：創建一個Y軸反轉的切換動畫     CLM(TransitionFlipAngular),//    作用：創建一個帶有反轉角切換動畫     CLM(TransitionZoomFlipX),//     作用：創建一個帶有縮放的x軸反轉切換的動畫     CLM(TransitionZoomFlipY),//     作用：創建一個帶有縮放的Y軸反轉切換的動畫     CLM(TransitionZoomFlipAngular)//     作用：創建一個帶有縮放 ，反轉角切換的動畫 };       Scene* SceneTest::createScene() {     auto scene = Scene::create();     auto layer = SceneTest::create();     scene->addChild(layer);     return scene; }   bool SceneTest::init() {     auto sprite = Sprite::create(SceneConfig::getInstance()->getBg());     Size visibleSize = Director::getInstance()->getVisibleSize();     Vec2 origin = Director::getInstance()->getVisibleOrigin();     sprite->setPosition(Vec2(visibleSize.width/2 + origin.x, visibleSize.height/2 + origin.y));     this->addChild(sprite, 0);     auto eventListener = EventListenerTouchOneByOne::create();     eventListener->onTouchBegan = CC_CALLBACK_2(SceneTest::onToucheBegans,this);     this->_eventDispatcher->addEventListenerWithSceneGraphPriority(eventListener,this);     return true; } #define MAX_LAYER (sizeof(createFunctions) / sizeof(createFunctions[0])) bool SceneTest::onToucheBegans(Touch* touch,Event* ev) {     auto idx = SceneConfig::getInstance()->getIndex();     idx++;     idx = idx%MAX_LAYER;     SceneConfig::getInstance()->setIndex(idx);     auto reScene = createFunctions[idx]();     Director::getInstance()->setDepthTest(false);     Director::getInstance()->replaceScene(reScene);     return true; }   static SceneConfig* config; static int _index; SceneConfig* SceneConfig::getInstance() {     if( !config )     {         config = new SceneConfig();         _index = 0;     }     return config; }   int SceneConfig::getIndex() {     return _index; }   void SceneConfig::setIndex(int index) {     _index = index; } std::string SceneConfig::getBg() {     auto index = _index;     if( index%2 > 0 )     {         return s_bg1;     }     else     {         return s_bg2;     } }   SceneTest.cpp

點擊屏幕看看效果吧。

相關函數：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

CL(TransitionJumpZoom),//作用： 創建一個跳動的過渡動畫  CL(TransitionProgressRadialCCW), //    作用： 創建一個扇形條形式的過渡動畫， 逆時針方向 CL(TransitionProgressRadialCW),//    作用： 創建一個扇形條形式的過渡動畫， 順時針方向 CL(TransitionProgressHorizontal),//    作用： 創建一個水平條形式的過渡動畫 CL(TransitionProgressVertical),//    作用： 創建一個垂直條形式的過渡動畫 CL(TransitionProgressInOut),//    作用： 創建一個由裏向外擴展的過渡動畫 CL(TransitionProgressOutIn),//    作用： 創建一個由外向裏擴展的過渡動畫 CL(TransitionCrossFade),//    作用：創建一個逐漸透明的過渡動畫 CL(TransitionFadeTR),//    作用：創建一個部落格過渡動畫， 從左下到右上 CL(TransitionFadeBL),//    作用：創建一個部落格過渡動畫， 從右上到左下 CL(TransitionFadeUp),//    作用：創建一個從下到上，條形摺疊的過渡動畫 CL(TransitionFadeDown),//    作用：創建一個從上到下，條形摺疊的過渡動畫 CL(TransitionTurnOffTiles),//    作用：創建一個隨機方格消失的過渡動畫 CL(TransitionSplitRows),//    作用：創建一個分行劃分切換的過渡動畫 CL(TransitionSplitCols), //    作用：創建一個分列劃分切換的過渡動畫 CL(TransitionShrinkGrow),//    創建一個放縮交替的過渡動畫 CL(TransitionRotoZoom),// 創建一個旋轉放縮交替的過渡動畫 CL(TransitionMoveInL),//    作用：創建一個從左邊推入覆蓋的過渡動畫 CL(TransitionMoveInR),//    作用：創建一個從右邊推入覆蓋的過渡動畫 CL(TransitionMoveInB),//    作用：創建一個從下邊推入覆蓋的過渡動畫 CL(TransitionMoveInT),//    作用：創建一個從上邊推入覆蓋的過渡動畫 CL(TransitionSlideInL),//    作用：創建一個從左側推入並頂出舊場景的過渡動畫 CL(TransitionSlideInR),//    作用：創建一個從右側推入並頂出舊場景的過渡動畫 CL(TransitionSlideInT), //    作用：創建一個從頂部推入並頂出舊場景的過渡動畫 CL(TransitionSlideInB),//    作用：創建一個從下部推入並頂出舊場景的過渡動畫 CLN(TransitionPageTurn),//    作用：創建一個翻頁的過渡動畫 CLS(TransitionFade),//    作用：創建一個逐漸過渡到目標顏色的切換動畫 CLM(TransitionFlipX),//    作用：創建一個x軸反轉的切換動畫 CLM(TransitionFlipY),//    作用：創建一個Y軸反轉的切換動畫 CLM(TransitionFlipAngular),//    作用：創建一個帶有反轉角切換動畫 CLM(TransitionZoomFlipX),//     作用：創建一個帶有縮放的x軸反轉切換的動畫 CLM(TransitionZoomFlipY),//     作用：創建一個帶有縮放的Y軸反轉切換的動畫 CLM(TransitionZoomFlipAngular)//     作用：創建一個帶有縮放 ，反轉角切換的動畫