场景和过渡

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) //     作用：创建一个带有缩放 ，反转角切换的动画