cocos2d-x-3.4-025-仿霍比特人3五军之战片尾动画

原文同步发布于我的wiki，查看原文或更新请移步： 点击打开链接

《霍比特人3-五军之战》结尾是什么样子的？

1. 主角的图片播放fade in fade out动画
2. 在1过程中fade in时图片略有放大
3. 图片上面有文字，文字无动画(这里涉及到素材的准备，图片，文字等，这一点先忽略)
4. 非动画元素，背景音乐，《The Last Goodbye》

思路

• fade in fade out动画，cocos的场景切换动画TransitionCrossFade和这个效果比较相符
• 背景音乐播放不难，参考官方文档
• fade in时图片略有放大，应该简单的缩放API就能搞定

素材的准备

1. 截图， 用如下命令截图若干 ffmpeg -ss 02:13:58 -i "F:\迅雷下载\[阳光电影www.ygdy8.co
m].霍比特人3：五军之战.HD.576p.中英双字幕.rmvb" -f image2 15.jpg
2. 下载背景音乐

编码

• 完整工程见 https://github.com/cheyiliu/Cocos2d-x-scene-transition
• 总思路：1.用TransitionCrossFade实现图片间的切换效果；2.用缩放动画实现切换后每张图片的放大效果；3.细节1，配合切换效果的时间，缩放动画需要适当延时避免卡顿；4.细节2，忠于原来电影的效果，增加“门缝”效果处理，即每个场景有3个层，一个层负责显示切换的图片并放大，另外两个层一上一下形成“门缝”挡住第一个层的上下边缘。
• FadeIn FadeOut 的思路是利用场景切换的动画效果TransitionCrossFade实现，

//切换动作
void HelloWorld::doTrans(float dt){
    log("do trans from %d", sIndex);
    Director::getInstance()->replaceScene(
            TransitionCrossFade::create(1, HelloWorld::scene())
            );
}

//5秒停留后播放下一张图片
scheduleOnce(schedule_selector(HelloWorld::doTrans), 5);

• FadeIn时缓慢放大， 播放了一个放大的Action， 细节1， 配合TransitionCrossFade的切换时间，这个动画需要做点延时才不会’卡顿’

        auto actionSeq = Sequence::create(
                DelayTime::create(1),
                ScaleTo::create(4, 1.08f),
                nullptr);
        sprite->runAction(actionSeq);

• 细节2，由于我们的素材是截图来的，图片本身的顶部和底部有黑边，中间是电影内容。若单纯直接放大的话，图片整体就会一起放大，看到的放大效果就是电影内容部分放大并将顶部和底部的黑边的空间挤压，切换下一张图片后，黑边空间又还原然后随着动画再被挤压。故我们需要特殊处理，最终的特殊处理的思路是：在顶部和底部加了两个不透明的黑色层，这样就和电影的效果一致了。类似于从门缝里往外看的效果，无论外面的世界如何放大，但是透过门缝给我们的视觉范围是固定的。

        float width = designResolutionSize.width;
        float height = 100;//估计值
        auto layerBot = LayerColor::create(Color4B(0, 0, 0, 0xFF), width, height);
        layerBot->setAnchorPoint(Vec2(0, 0));
        layerBot->setPosition(0, 0);
        scene->addChild(layerBot);

        auto layerTop = LayerColor::create(Color4B(0, 0, 0, 0xFF), width, height);
        layerTop->setAnchorPoint(Vec2(0, 0));
        layerTop->setPosition(0, designResolutionSize.height - height);
        scene->addChild(layerTop);

效果图

• linux下截图命令： byzanz-record -d 4 -x 10 -y 150 -w 810 -h 460 huobite3.gif，这次的截图有点大，大家预览时耐心等待下。若大家有更好的截图工具，欢迎推荐。
• 效果图地址1(1.5M) https://github.com/cheyiliu/All-in-One/blob/master/res/cocos2d/cocos%E4%BB%BF%E9%9C%8D%E6%AF%94%E7%89%B9%E4%BA%BA3%E7%89%87%E5%B0%BE-2.gif
• 效果图地址2(7.9M) https://github.com/cheyiliu/All-in-One/blob/master/res/cocos2d/cocos%E4%BB%BF%E9%9C%8D%E6%AF%94%E7%89%B9%E4%BA%BA3%E7%89%87%E5%B0%BE.gif

吐槽

• 有木有发现用cocos做效果就这么简单？！
• 《The Last Goodbye》真心好听。
• 欢迎大家fork, star and pull request到这个demo仓库

扩展

• 课后题， 霍比特人最后一张人物图片展示后，上下滚动的字幕如何用cocos实现？