Scene是UI树的根节点，正常情况下，是不会同时绘制两个Scene，因此也就无法做到Scene间的延时切换（有动画的切换），因为这必须要同时绘制两个Scene。cocos引擎设计了TransitionScene来支持同时绘制两个Scene。
它的设计思路就是，自定义一种特殊的Scene，叫TransitionScene，它包含两个普通Scene：

  • inScene：要切换成的新场景
  • outScene：被切换的当前场景

绘制TransitionScene其实就是绘制它的inScene和outScene。至于切换动画，这个和普通节点的Action动画一样执行。

UML

TransitionScene模块的UML如下：
点击查看【processon】

使用示例

  2. // 需求：设置NewScene的入场动画
  4. auto newScene          = NewScene::create();
  5. auto time              = 1.5f;                                        // 入场动画时间
  6. auto transitionScene = TransitionScene::create(time, newScene);        // inScene: newScene
  7.                                                                     // outScene: runningScene
  9. // 下面这一步，将runningscene设置为transitionScene，引擎将渲染transitionScene，
  10. // 而transitionScene的渲染逻辑是渲染inScene和outScene。
  11. // 这里并不会触发runningScene的onExit和nextScene的onEnter，而是改由transitionScene内部控制。
  12. Director::getInstance()->replaceScene(transitionScene);

切换效果

JumpZoom

TransitionJumpZoom。
GIF.gif

Progress效果

TransitionProgressRadialCW、TransitionProgressRadialCCW：
image.png

TransitionProgressHorizontal、TransitionProgressVertical：
image.png

TransitionProgressInOut、TransitionProgressOutIn：
image.png

淡化效果

TransitionCrossFade：
image.png

TransitionFade、FadeWhiteTransition：

  • outScene fade out，屏幕黑色，然后fade in inScene
  • FadeWhiteTransition，fade out之后，屏幕白色

TransitionFadeTR、TransitionFadeBL：
image.png

TransitionFadeUp、TransitionFadeDown：
image.png

翻书效果

PageTransitionForward、PageTransitionBackward

瓦片效果

TransitionTurnOffTiles：
image.png

Split分裂效果

TransitionSplitRows、TransitionSplitCols：
image.png

Flip翻转效果

FlipXLeftOver
FlipXRightOver
FlipYUpOver
FlipYDownOver
image.png

FlipAngularLeftOver
FlipAngularRightOver
image.png

ZoomFlipXLeftOver
ZoomFlipXRightOver
ZoomFlipYUpOver
ZoomFlipYDownOver
image.png

ZoomFlipAngularLeftOver
ZoomFlipAngularRightOver
image.png

TransitionShrinkGrow

image.png

TransitionRotoZoom

image.png

滑动效果

TransitionMoveInL
TransitionMoveInR
TransitionMoveInT
TransitionMoveInB
image.png

TransitionSlideInL
TransitionSlideInR
TransitionSlideInT
TransitionSlideInB
image.png

源码分析

  2. class CC_DLL TransitionScene : public Scene
  3. {
  4. public:
  6.      // 场景切换结束回调
  7.     void finish(void);
  9.      // 隐藏outScene、显示inScene，有用子类的动画有这个需求
  10.     void hideOutShowIn(void);
  12.     // 这是TransitionScene的实现基础，在这里实现对inScene和outScene的绘制
  13.     // 这样才能做到同时绘制两个Scene。
  14.     virtual void draw(Renderer *renderer, const Mat4 &transform, uint32_t flags) override;
  16.     // 在这里相应调用inScene的onEnter和onEnterTransitionDidFinish、outScene的onExit和onExitTransitionDidStart
  17.     virtual void onEnter() override;
  18.     virtual void onExit() override;
  20.     virtual void cleanup() override;
  22. protected:
  23.     virtual void sceneOrder();
  24.     void setNewScene(float dt);        // 替换Director的场景切换逻辑
  26.     Scene *_inScene;                // 要切换进来的scene
  27.     Scene *_outScene;                // 被切换的scene，即是runningScene
  28.     float _duration;                // 切换动画持续时间
  29.     bool _isInSceneOnTop;            // inScene的画面是不是在outScene上面，后绘制的画面会覆盖到前面的画面，有在上面的感觉。
  30.     bool _isSendCleanupToScene;        // outScene别切换出去要不要执行cleanup
  32.     ......
  33. };
  35. // 分别绘制inScene和outScene
  36. void TransitionScene::draw(Renderer *renderer, const Mat4 &transform, uint32_t flags)
  37. {
  38.     Scene::draw(renderer, transform, flags);
  40.     if( _isInSceneOnTop ) {
  41.         _outScene->visit(renderer, transform, flags);
  42.         _inScene->visit(renderer, transform, flags);
  43.     } else {
  44.         _inScene->visit(renderer, transform, flags);
  45.         _outScene->visit(renderer, transform, flags);
  46.     }
  47. }
  49. void TransitionScene::finish()        // 切换动画结束，做一些首尾工作
  50. {
  51.     // clean up
  52.     _inScene->setVisible(true);
  53.     _inScene->setPosition(0,0);
  54.     _inScene->setScale(1.0f);
  55.     _inScene->setRotation(0.0f);
  56.     _inScene->setAdditionalTransform(nullptr);
  58.     _outScene->setVisible(false);
  59.     _outScene->setPosition(0,0);
  60.     _outScene->setScale(1.0f);
  61.     _outScene->setRotation(0.0f);
  62.     _outScene->setAdditionalTransform(nullptr);
  64.     // 动画执行完毕之后，在下一帧切换runningScene为inScene
  65.     this->schedule(CC_SCHEDULE_SELECTOR(TransitionScene::setNewScene), 0);
  66. }
  68. void TransitionScene::setNewScene(float /*dt*/)
  69. {    
  70.     this->unschedule(CC_SCHEDULE_SELECTOR(TransitionScene::setNewScene));
  72.     // Before replacing, save the "send cleanup to scene"
  73.     Director *director = Director::getInstance();
  74.     _isSendCleanupToScene = director->isSendCleanupToScene();
  76.     director->replaceScene(_inScene);        // runningScene正式切换为inScene
  77.     ......
  79.     // issue #267
  80.     _outScene->setVisible(true);
  81. }
  83. // custom onEnter
  84. void TransitionScene::onEnter()
  85. {
  86.     ......
  88.     Scene::onEnter();
  90.     // disable events while transitions
  91.     _eventDispatcher->setEnabled(false);
  93.     // outScene should not receive the onEnter callback
  94.     // only the onExitTransitionDidStart
  95.     _outScene->onExitTransitionDidStart();
  97.     _inScene->onEnter();
  98. }
  100. // custom onExit
  101. void TransitionScene::onExit()
  102. {
  103.     ......
  105.     Scene::onExit();
  107.     // enable events while transitions
  108.     _eventDispatcher->setEnabled(true);
  109.     _outScene->onExit();
  111.     // _inScene should not receive the onEnter callback
  112.     // only the onEnterTransitionDidFinish
  113.     _inScene->onEnterTransitionDidFinish();
  115.     ......
  116. }

总结一下下面代码的场景切换过程：

  2. // 假设runningScene不为空，runningScene不是TransitionScene子类对象
  3. auto runningScene    = Director::getInstance()->getRunningScene();    
  5. auto newScene          = NewScene::create();
  6. auto transitionScene = TransitionScene::create(1.5f, newScene);        // inScene:  newScene
  7.                                                                     // outScene: runningScene
  9. Director::getInstance()->replaceScene(transitionScene);
  • 下一帧
    • Director::setNewScene，runningScene切换为transitionScene，下面的runningScene都中上面代码中的runningScene
    • transitionScene::onEnter()
      • runningScene::onExitTransitionDidStart
      • newScene::onEnter()
      • 执行newScene的入场动画、runningScene的离场动画
    • transitionScene::onEnterTransitionDidFinish()
    • 若干帧之后
      • 动画结束，执行transitionScene::finish，表示动画结束回调
      • 下一帧
        • TransitionScene::setNewScene
          • director->replaceScene(newScene)
          • 下一帧
            • 执行director::setNextScene()，runningScene切换为newScene
            • transitionScene::onExitTransitionDidStart
            • transitionScene::onExit
              • runningScene::onExit
              • newScene::onEnterTransitionDidFinish
            • transitionScene::cleanup

**
抽出只与三个Scene相关的过程调用：

  • transitionScene::onEnter()
    • runningScene::onExitTransitionDidStart
    • newScene::onEnter()
  • transitionScene::onEnterTransitionDidFinish
  • transitionScene::onExitTransitionDidStart
  • transitionScene::onExit
    • runningScene::onExit
    • newScene::onEnterTransitionDidFinish
  • transitionScene::cleanup