Ziank的技术博客

Cocos之场景转换（Transitions)

发表于 | 分类于 ，

我们在基础概念一节讲过修改当前场景的常见方式有三种，pushScene，replaceScene和popScene；但是切换场景使用的效果则会有很多种，例如淡入淡出，放大缩小，跳动等等。
Cocos提供了这种在两个场景之间直接进行转换的能力，在技术上讲，一个场景转换就是在展示并控制一个新场景之前执行的一个切换效果。

场景之间通过TransitionScene系列类来实现过渡跳转的效果。TransitionScene继承于Scene，该系列类主要是与场景切换特效相关的一些使用类。如TransitionFadeDown、TransitionPageTurn、TransitionJumpZoom等等。

###切换特效
在Cocos中提供的场景切换特效主要由以下几种：

  • TransitionRotoZoom 旋转进入
  • TransitionJumpZoom 跳动进入
  • TransitionPageTurn 翻页效果进入
  • TransitionRadialCCW 钟摆效果
  • TransitionMoveInL / TransitionMoveInR / TransitionMoveInT / TransitionMoveInB 左侧/右侧/顶部/底部进入
  • TransitionSlideInL / TransitionSlideInR / TransitionSlideInT / TransitionSlideInB 分别从左侧/右侧/顶部/底部滑入
  • TransitionShrinkGrow 交替进入
  • TransitionFlipX/TransitionFlipY X轴翻入（左右）/Y轴翻入
  • TransitionFlipAngular 左上右下轴翻入
  • TransitionFadeTR ／TransitionFadeBL／TransitionFadeUp／TransitionFadeDown 小方格右上角显示进入／ 小方格左下角显示进入／ 横条向上显示进入／ 横条向下显示进入
  • TransitionSplitCols ／ TransitionSplitRows 竖条切换进入／ 横条切换进入
  • TransitionZoomFlipAngular 左上右下轴翻入放大缩小效果
  • TransitionFade 渐隐进入
  • TransitionCrossFade 渐变进入
  • TransitionTurnOffTiles 小方格消失进入
  • TransitionRadialCCW／TransitionRadialCW 扇面展开收起

场景转换的实现代码一般如下：

1
2
auto transitions = TransitionMoveInL::create(0.2f, scene);
Director::getInstance()->replaceScene(transitions);

场景的转换是由Director类来控制的，通过调用Director类的replaceScene(Scene scene）方法可直接使用传入scene替换当前场景来切换画面，当前场景会被释放，它是切换场景时最常用的方法。
前面说过，场景转换的一系列类都继承于Scene类，所以可以创建一个转换场景的对象代替scene，从而实现各种转换场景的效果。