一、开发环境介绍

操作系统：UOS1060专业版本。

cocos2dx:版本4.0

环境搭建教程：

统信UOS下配置安装cocos2dx开发环境_三雷科技的博客-CSDN博客

本课主要内容：

精灵动画:移动动画
精灵动画:变大,变小动画
精灵动画:按照帧播放动画.

二、开发内容

我们为了使得游戏不那么呆板,因此可以使用动画来丰富其效果.

2.1. logo变化动画

void WelcomeScene::onEnterTransitionDidFinish()
{
    log("onEnterTransitionDidFinish");
    auto Sepquence = Sequence::create(ScaleTo::create(0.5f,1.5f,1.5f),
                                      ScaleTo::create(0.2f,1.0f,1.0f),
                                      CallFuncN::create(CC_CALLBACK_0(WelcomeScene::initLogoAnimation,this)),
                                      CallFuncN::create(CC_CALLBACK_0(WelcomeScene::initButtonStartAnimation,this)),
                                      CallFuncN::create(CC_CALLBACK_0(WelcomeScene::initButtonCreditAnimation,this)),
                                      NULL);
    sprite_logo_->runAction(Sepquence);
}

场景加载完毕后会自动调用onEnterTransitionDidFinish函数,因此我们可以在onEnterTransitionDidFinish函数中执行动画效果.

Sequence:表示一个组合动作.他可以传递多个动画效果.并且按照先后顺序执行.

上面表示的动画效果:

1. 先变大由原图的0.5变为1.5,
2.再缩小后变大,0.2到1(1为原图大小)
3.调用initLogoAnimation动画
4.调用initButtonStartAnimation动画
5.调用initButtonCreditAnimation动画

2.2. logo帧动画

auto sprite = Sprite::createWithSpriteFrameName("logo_brillo_0001.png");
    sprite->setPosition(point_logo_);
    // 生成祯动画
    SpriteFrame * frame = nullptr;
    Vector<SpriteFrame*> aFrames(20);
    for (int len = 1; len <= 21; len ++) {

        frame  = SpriteFrameCache::getInstance()->getSpriteFrameByName(StringUtils::format("logo_brillo_00%02d.png",len));
        if(nullptr != frame){
            aFrames.pushBack(frame);
        }
    }
    addChild(sprite,10);
    auto animation = Animation::createWithSpriteFrames(aFrames,0.1f);
    sprite->runAction(RepeatForever::create(Animate::create(animation)));

帧动画,类似于动画片的效果,由多张图片组成,不断的切换图片达到动画效果.

这里有20张图片组成,他的动画效果是使得logo有闪现效果.

其中我们使用RepeatForever::create(Animate::create(animation))表示不间断的重复该效果.

白色闪亮效果其实由多张图片组成.

2.3 start按钮移动动画

sprite_button_start_->setVisible(true);
    // 使得精灵移动
sprite_button_start_->runAction(MoveTo::create(0.3f,Point(point_logo_.x,point_logo_.y - 180)));

移动动画使用MoveTo,表示使用0.3秒移动到指定的坐标点

2.4 Credite移动动画

sprite_button_credit_->runAction(
                Sequence::create(
                    DelayTime::create(0.3f),
                    CallFuncN::create(CC_CALLBACK_0(Sprite::setVisible,sprite_button_credit_,true)),
                    MoveTo::create(0.3f,Point(point_logo_.x,point_logo_.y-360)),NULL));

DelayTime::create表示延时动画,因为需要start按钮移动结束后才移动Credite按钮因此需要使用延时的方式做.