cocos2d-x 3.6版连连看开始界面动画，cocos2d-x3.6
我的博客：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), 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()), Vec2(CCRANDOM_0_1() * wSize.width, 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);
这里挺简单，不过这个回调函数的原理有很多知识，这个后面专门来讲3.x版引擎的回调函数。
这个回调函数里面还没有东西，这里我们要进入游戏场景了，但是这个场景现在还没有（：。
截个图：
我这里没有做gif图片，懒得弄了。后面我会发放源码的，有兴趣的同学可以下载下来自己研究。
http://www.bkjia.com/Androidjc/1017606.htmlwww.bkjia.comtruehttp://www.bkjia.com/Androidjc/1017606.htmlTechArticlecocos2d-x 3.6版连连看开始界面动画，cocos2d-x3.6 我的博客：http://blog.csdn.net/dawn_moon 上一篇文章讲了开始界面的几个主要元素，背景，白云，倒...
