cocos2d-x 3.6版连连看开始界面动画_app

概述我的博客：http://blog.csdn.net/dawn_moon 上一篇文章讲了开始界面的几个主要元素，背景，白云，倒影，岛及其倒影，沙滩等。里面稍微难一点的就是序列帧动画，延时动作序列，比如船的动画效果。船的来回游荡的动画稍微有一点复杂，里面由很多动作组成一个序列，比如翻转，移动，移动的逆动作，序列包装，无限重复动作包装等。不过代码很清晰，看不懂的可以下面留言。这一篇讲几个比较高难度的动

我的博客：http://blog.csdn.net/dawn_moon
上一篇文章讲了开始界面的几个主要元素，背景，白云，倒影，岛及其倒影，沙滩等。里面稍微难一点的就是序列帧动画，延时动作序列，比如船的动画效果。船的来回游荡的动画稍微有一点复杂，里面由很多动作组成一个序列，比如翻转，移动，移动的逆动作，序列包装，无限重复动作包装等。不过代码很清晰，看不懂的可以下面留言。

这一篇讲几个比较高难度的动作，学完之后一定充满了快感。哈哈~~

首先是海浪的动画，然后是海鸥的动画，然后是一个play按钮和回调。

可能看起来很简单，但是其实还是有很多知识点的。网上有一篇文章，他实现的方式是用一个动画接一个回调，回调函数里面是另一个动作来完成的。我这里不这么做，我就纯动作序列。

这个海浪有点特别，它的动画是两个纹理来完成的，潮起的时候是一个纹理，潮落的时候是另一个纹理。那么怎么样用两个精灵来做一个动画呢，有方法吗。

当然是有的，不然我就不讲了。

这里用到一个比较高级的动作，叫做TargetedAction，这个动作有连个参数，一个是动作，另一个是要执行这个动作的目标。好了，有了这个东西就好办了。

思路是这样，海浪1执行一个动作序列，序列里面有一个TargetedAction动作，这个TargetedAction动作的执行者是海浪2，它又会执行自己的一个动作序列，那么连起来就是一个潮涨潮落的动作了。看代码：

// 海浪1        auto wave = Sprite::createWithTexture(textureCache->getTextureForKey(s_backgound_sea1));        wave->setopacity(0);        wave->setposition(wSize.wIDth / 2,140 * 2);        addChild(wave);        // 海浪2        auto wave2 = Sprite::createWithTexture(textureCache->getTextureForKey(s_backgound_sea2));        wave2->setposition(wSize.wIDth / 2,100 * 2);        wave2->setopacity(0);        addChild(wave2);        // 两组动画，知识点比较多        auto waveMoveBy = MoveBy::create(4.0,Vec2(0,-80));        // 由暗到明        auto fadeIn = FadeIn::create(3.0);        // 由明到暗        auto fadeOut = FadeOut::create(1.0);        // 放到初始位置        auto place1 = Place::create(Vec2(wSize.wIDth / 2,140 * 2));        // 同时进行动作，时间长度由最长的动作决定        auto spawn = Spawn::create(waveMoveBy,Sequence::create(fadeIn,fadeOut,nullptr),nullptr);        // 海浪2的动作        auto spawn2 = Spawn::create(waveMoveBy->clone()->reverse(),Sequence::create(fadeIn->clone(),fadeOut->clone(),nullptr);        // 海浪2的初始位置        auto place2 = Place::create(Vec2(wSize.wIDth / 2,100 * 2));        // target 动作，指定tartget的动作        auto targetAction = TargetedAction::create(wave2,Sequence::create(spawn2,place2,nullptr));        // 延迟2s        auto delay = DelayTime::create(2.0);        wave->runAction(RepeatForever::create(Sequence::create(spawn,targetAction,place1,delay,nullptr)));

每一行都加了注释，里面的动作比较多，有Place，FadeIn，FadeOut，MoveBy，Spawn，TargetedAction，RepeatForever。知识点蛮多的哈。

这一套组合起来效果还不错，有疑问可以留言。

然后再来看海鸥的动作。

海鸥会在海面上飞过，当然我这里屏幕上只有一只海鸥飞。但是我想让时不时有一只海鸥飞过，而且飞的方向，速度都是不一样的，这样看起来会比较真实一些。这怎么玩，会不会玩坏了，哈哈。

设计是这样的，一个海鸥精灵，它会有一个序列帧动画，扇动翅膀的动画。然后随机出现一个在一个位置，飞过屏幕，路线也是随机的，时不时会出现一只。

先看序列帧动画：

// 鸟        auto birdFrame = spriteFrameCache->getSpriteFrameByname("seagull1.png");        mBird = Sprite::createWithSpriteFrame(birdFrame);        auto point = Vec2(CCRANDOM_0_1() * wSize.wIDth,0);        mBird->setposition(point);        // 创建帧动画        auto birdAnimation = Animation::create();        // 循环取鸟的序列帧        for (int i = 1; i < 4; i++) {            char bname[64] = {0};            sprintf(bname,"seagull%d.png",i);            birdAnimation->addSpriteFrame(spriteFrameCache->getSpriteFrameByname(bname));        }        // 设置每一个动画帧的间隔        birdAnimation->setDelayPerUnit(0.3);        // 动画完毕后保持第一帧        birdAnimation->setRestoreOriginalFrame(true);        addChild(mBird);        // 创建一个动作        auto birdAnimate = Animate::create(birdAnimation);        mBird->runAction(RepeatForever::create(birdAnimate));

这里用了一个成员变量来保寸海鸥对象，为什么，因为动作里面没有办法来实现时不时飞一只海鸥过来了。

要实现这个效果怎么搞，时不时飞一只，那就是每过一个时间间隔，发生一些事情。那么这不就跟系统的调度器很像么，对，就是调度器。

屏幕上的海鸥我们放在了point这个位置，这个位置有点随机性，看代码，里面用了一个随机函数CCRANDOM_0_1。那么我们需要把第一只海鸥飞出去。

mBird->runAction(MoveBy::create(2,Vec2(CCRANDOM_0_1() * wSize.wIDth,point.y + wSize.height + 100)));

然后启用调度器

// 启用默认调度器，调用系统update函数来刷新 scheduleUpdate();

这个函数会启用系统调度器，那么Node节点的update函数就会开始刷新，默认每0.1s调用一次。所以我们要实现update函数。

voID StartGame::update(float dt) { // 如果海鸥飞出屏幕，就重新设置其位置，重新执行飞的动作 if (mBird->getposition().y > wSize.height + 20) { auto point = Vec2(CCRANDOM_0_1() * wSize.wIDth,10);        mBird->setposition(point);        mBird->runAction(MoveBy::create(floor(5 * CCRANDOM_0_1()),point.y + wSize.height)));    }}

那么鸟的动画也做完了。

接下里弄一个play的按钮，点击开始游戏。

// 播放按钮        auto play = Sprite::createWithTexture(textureCache->getTextureForKey(s_button_play));        auto playS = Sprite::createWithTexture(textureCache->getTextureForKey(s_button_play_s));        // 菜单按钮接一个回调函数        auto menuItem = MenuItemSprite::create(play,playS,CC_CALLBACK_1(StartGame::play,this));        auto menu = Menu::create(menuItem,nullptr);        menu->setposition(wSize.wIDth / 2,wSize.height / 2);        addChild(menu);