实例CSS3开场动画的制作与优化

jopen 9年前

素材：

期望效果： 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云的生成代码：

function createCloud() {      vardiv = document.createElement('div');      div.className = 'cloudBase';      // 随机定位当前云团位置      var t = 'translateX( ' + random_x + 'px )  ' +             'translateY( ' + random_y + 'px )  ' +             'translateZ( ' + random_z + 'px )';      div.style.transform = t;      world.appendChild(div);      for (varj = 0; j < 5 + Math.round(Math.random() * 10); j++) {          varcloud = document.createElement('div');          cloud.className = 'cloudLayer';          // 随机产生云层的'translateX/translateY/translateZ/rotateZ/scale         // CSS值，这里是云团充实感的关键实现          cloud.data = {              x: random_x,              y: random_y,              z: random_z,              a: random_a,              s: random_s          };          var t = 'translateX( ' + random_x + 'px )  ' +                  'translateY( ' + random_y + 'px )  ' +                 'translateZ( ' + random_z + 'px )  ' +                 'rotateZ( ' + random_a + 'deg )  ' +                 'scale( ' + random_s + ' )';             cloud.style.transform = t;          div.appendChild(cloud);          layers.push(cloud);      }      return div;  }

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

@-webkit-keyframes angular {      0% {          -webkit-transform: translateZ(300px);          opacity: 1;      }      100% {          -webkit-transform: translateZ(570px);          opacity: 1;      }  }     @-webkit-keyframes dayToNight {      0% {          background-color: #007fd5;          opacity: 1;      }      100% {          background-color: #000;          opacity: 1;      }  }

星光及logo:

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

/* 星光场景 */  @-webkit-keyframes starsense {      0% {          -webkit-transform: scale(1);          opacity: 0;      }      30% {          -webkit-transform: scale(25);          opacity: 1;      }      90% {          -webkit-transform: scale(0);          opacity: 1;      }      100% {          -webkit-transform: scale(0);          opacity: 0;      }  }  /* logo场景 */  @-webkit-keyframes logosense {      0% {          -webkit-transform: scale(0);          transform: scale(0);          opacity: 1;      }      20% {          -webkit-transform: scale(1);          transform: scale(1);      }      85% {          -webkit-transform: scale(1);          transform: scale(1);          opacity: 1;          -webkit-filter: blur(0);      }      100% {          -webkit-transform: scale(100);          transform: scale(100);          opacity: 0;          -webkit-filter: blur(50px);      }  }

性能优化：

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

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

    function loadOpenSenseAnimation() {          isStart = true;          openSense.className += ' begin';          world.className += ' begin';          logoSense.className += ' begin';             setTimeout(function() {              viewPort.className = ' begin';          }, 4000);          loadingAudio === 0 && Audio.play();          openSense.addEventListener("webkitAnimationEnd", function(){               // 动画结束时事件               console.log('动画执行结束啦！');               if (openSense) {                  // 执行完就抹除                  openSense.parentNode.removeChild(openSense);              }          }, false);       }

于是它变成了这样纸：

    function loadOpenSenseAnimation() {             Settings.isStart = true;          $container.className += ' animated';             $mask.addEventListener("webkitAnimationStart", function() {              // 动画开始时候播放              if (Settings.isVoice && Settings.loadingAudio === 0) {                  Settings.AudioPlayer.play();              }          }, false);             $container.addEventListener("webkitAnimationEnd",             function(animation) {              // 动画结束时事件              if (animation.animationName === Settings.EndingAnimatedName) {                  OpenSense.pass();              }          }, false);      }

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