高级之路篇十：高性能动画

前端领域，时常会与动画打交道，现盘点一下啰！

 

1、@keyframes，需要注意的是需要兼容处理，优点在于能够创建循环动画。

animation: name duration  timing-function | delay | iteration-count | direction

@keyframes mymove
{
    0%   {top:0px;}
    25%  {top:200px;}
    50%  {top:100px;}
    75%  {top:200px;}
    100% {top:0px;}
}

@-moz-keyframes mymove /* Firefox */
{
    0%   {top:0px;}
    25%  {top:200px;}
    50%  {top:100px;}
    75%  {top:200px;}
    100% {top:0px;}
}

@-webkit-keyframes mymove /* Safari 和 Chrome */
{
    0%   {top:0px;}
    25%  {top:200px;}
    50%  {top:100px;}
    75%  {top:200px;}
    100% {top:0px;}
}

@-o-keyframes mymove /* Opera */
{
    0%   {top:0px;}
    25%  {top:200px;}
    50%  {top:100px;}
    75%  {top:200px;}
    100% {top:0px;}
}

.div{
    animation:mymove 5s infinite;
    -moz-animation:mymove 5s infinite; /* Firefox */
    -webkit-animation:mymove 5s infinite; /* Safari and Chrome */
    -o-animation:mymove 5s infinite; /* Opera */
}

2、transition，从一种样式过渡为另一种样式时为元素添加效果。

transition：property duration timing-function delay

div
{
    width:100px;
    height:100px;
    background:yellow;
    transition:width 2s, height 2s;
    -moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
    -webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
    -o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
}

div:hover
{
    width:200px;
    height:200px;
    transform:rotate(180deg);
    -moz-transform:rotate(180deg); /* Firefox 4 */
    -webkit-transform:rotate(180deg); /* Safari and Chrome */
    -o-transform:rotate(180deg); /* Opera */
}

css中的动画方式就以上两种。

 

1、jquery的动画api：animate()，或者slideDown()、slideUp()，又或者fadeIn()、 fadeOut()

2、通过定时器和间隔来实现

3、window.requestAnimationFrame(callback)

JavaScript中的动画方式就以上三种。

 

接下来我们谈谈性能方面：

• setTimeout的执行时间并不是确定的。在Javascript中， setTimeout 任务被放进了异步队列中，只有当主线程上的任务执行完以后，才会去检查该队列里的任务是否需要开始执行，因此 setTimeout 的实际执行时间一般要比其设定的时间晚一些。

• 刷新频率受屏幕分辨率和屏幕尺寸的影响，因此不同设备的屏幕刷新频率可能会不同，而 setTimeout只能设置一个固定的时间间隔，这个时间不一定和屏幕的刷新时间相同。

所以通过定时器和间隔来实现，settimeout引起丢帧现象，从而出现视觉上的卡顿现象。

1、浏览器重绘或重排的原因，需要动画的元素使用定位方式，如relative、absolute、fixed。具体原因可参见《高级之路篇一：从浏览器渲染开始》

2、需要动画的属性优先结合transform转换实现，是相对于元素自身的转换，不会影响到其他元素，避免了重排，比如移动、缩放、旋转、倾斜等。其中的translateZ(z)可开启硬件加速，移动端效果更甚，常见的开启方式还有scale、route、opacity、z-index等。

3、动画过程中尽少的使用阴影属性，是一笔不小的性能开销。

4、优先使用window.requestAnimationFrame(callback)实现持续性动画

      优势：

• 浏览器可以优化并行的动画动作，更合理的重新排列动作序列，并把能够合并的动作放在一个渲染周期内完成，从而呈现出更流畅的动画效果。 也就是说，requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧。
• 在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的的cpu，gpu和内存使用量。
• 一旦页面不处于浏览器的当前标签，就会自动停止刷新。这就节省了CPU、GPU和电力。
•  

• #anim {
    position: absolute;
    left: 0px;
    width: 150px;
    height: 150px;
    line-height: 150px;
    background: aqua;
    color: white;
    border-radius: 10px;
    padding: 1em;
  }
  
  
  
  <div id="anim"> Click here to start animation</div>
  
  
  // 兼容性处理
  window.requestAnimFrame = (function() {
    return (
      window.requestAnimationFrame ||
      window.webkitRequestAnimationFrame ||
      window.mozRequestAnimationFrame ||
      window.oRequestAnimationFrame ||
      window.msRequestAnimationFrame ||
      function(callback, element) {
        window.setTimeout(callback, 1000 / 60)
      }
    )
  })()
  
  var elem = document.getElementById('anim')
  var startTime = undefined
  
  function render(time) {
    time = Date.now()
    if (startTime === undefined) {
      startTime = time
    }
    elem.style.left = ((time - startTime) / 10) % 300 + 'px'
    elem.style.top = ((time - startTime) / 10) % 300 + 'px'
    elem.style.borderRadius = ((time - startTime) / 10) % 300 + 'px'
    elem.style.opacity = Math.floor((time - startTime / 100)) % 2 === 0 ? 1 : 0.3
  }
  
  elem.onclick = function() {
    (function animloop() {
      render()
      requestAnimFrame(animloop, elem)
    })()
  }

  5、最后一跟稻草：css3中的will-change，不到问不得已，慎用！！！