场景和过渡

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