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

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

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

思路

• fade in fade out动画，cocos的cpp-tests里面演示的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
• FadeIn FadeOut 的思路是利用场景切换的动画效果实现，
  
void HelloWorld::doTrans(float dt){
log("do trans from %d", sIndex);
Director::getInstance()->replaceScene(
TransitionCrossFade::create(1, HelloWorld::scene())
);
}
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，这次的截图有点大，大家预览时耐心等待下。若大家有更好的截图工具，多谢推荐。
  

吐槽

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

扩展

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