素材：

期望效果：http://v.youku.com/v_show/id_XMjY2NTc1MzYw.html

一开始需要制作这个动画的时候，其实我是拒绝的，因为单凭这几个素材，即便我对动画了如指掌，也是无从下手的。后来有一天，我见到了 wow 军团再临的 CG 动画，脑海中突然灵光一闪，便出现了这样的构思：

“ 穿越重重的云层，伴随着白天到黑夜的转化，logo 从遥远的地方出现，随后往屏幕方向快速移动，在 logo 快要充满整个屏幕的时候星光一闪，又消逝在远方...” 

于是我开始了开场动画的坎坷历程。

云层制作：

        云层的制作耗时比较久，期间参阅了网上一些使用 CSS 模拟云层的博文及示例，下面列出两个比较好的示例：

        移动的云：https://codepen.io/montanaflynn/pen/orxwK

        3D 云：https://www.clicktorelease.com/blog/how-to-make-clouds-with-css-3d

        实际上使用单图片来模拟云层会有一些体验问题，比如，当我们试图穿过一片图片生成的云时，会感觉一下就没了，对用户而言会产生一定的视觉落差，而真实的云层是一片区域，所以一片云我使用了 5 张图片转换方向来生成，这样在三维的场景下我们的云就有了充实感。

        下面引用一段 Jaume Sanchez Elias 写的 3D 云的生成代码：

        通过上面的方法去输出云层，我们便拥有了质感较强的云。而为了让动画的加载更快一些，我将生成的云层以固定 DOM 的形式写在页面中，让前期的 JS 消耗尽量减小，并且图片的加载会在页面加载之初进行。在有了云层 DOM 后，便可以开始着手穿越云层效果的制作了，穿越过程里还夹带了从白天到黑夜的背景色变化效果，这个穿越的动作我使用 translateZ 属性来实现，让屏幕随着时间往前推进，完成穿越云层的效果，代码实现如下（这里仅展示 webkit 版本代码）：

  星光及 logo:

        logo 及星光的呈现过程是一个放大及放更大/缩小的过程，通过改变它的 scale 可以实现，实现如下：

性能优化：

        由于在测试中发现动画的性能是一个比较大的问题，在一些配置比较低的机器会有很多掉帧，卡顿的现象，因此需要进行性能方面的优化。

        我使用 chrome 里面的工具 Timeline 进行了动画执行性能检查，从中发现，在动画执行周期内，渲染及重绘耗费的资源比较多，并且期间 JS 也占用了一些资源，于是我首先回头查看了我的动画加载函数

        于是它变成了这样纸：

        这里我把 setTimeout 函数移除掉，使用 animation-delay 来接替 setTimeout 的位置，多个 DOM 操作被合并成了一个，把 JS 的消耗影响尽量降到最低。动画的声音播放使用 webkitAnimationStart 事件来监听，使音乐与动画的进行同步（这里需要注意 webkitAnimationEnd/webkitAnimationStart 的使用，每一个子节点的动画开始结束都会触发这个事件，需要判断一下 animationName 确定是否是自己需要的动画事件），接下来我再次使用 Timeline 进行检查：

        可以看到，在动画执行期间，从云层开始帧数就一直不高，结合此前的渲染重绘时间占用率过高，初步定为 CSS 属性使用不当。于是我查阅了 CSS 动画中所使用的属性：

        根据 Timeline 掉帧的时间片段，结合这个时间段内产生作用的 CSS 属性，将一些可能影响性能的属性标记了出来，并进行了排除试验，我们发现，blur 是损耗性能的主要因素，于是我对 CSS 做了一次排除优化，将 blur，重复或不必要的属性进行剔除。

优化结果：

        多次优化后，通过 Timeline 得到了下面的结果，我们可以看到，除了页面加载之初的一些掉帧，后面基本平稳在 60 帧，期间的无帧数是因为动画固定在 logo 处停了 3s 左右。

        在线示例：  http://huangxingbang.github.io/openSense/cloud.html

总结：

        1. 动画尽量使用 opacity/translate/rotate /scale 这些可以让 GPU 分担工作的属性。
        2. 摈弃 setTimeout 在动画中的控制，动画播放时机的控制使用 animation-delay 来实现，如果需要精准控制，使用 RequestAnimationFrame 对动画进行更新。
        3. 使用 webkitAnimationStart/webkitAnimationEnd 对动画并行的任务进行开始/结束控制。

参考资料：

        前端性能优化（CSS 动画篇）：https://segmentfault.com/a/1190000000490328

        高性能 CSS3  动画：https://www.qianduan.net/high-performance-css3-animations/