animation动画卡顿或有锯齿感

animation动画卡顿或有锯齿感

卡顿原因：

浏览器是单线程运行的。但是我们要明确以下几个概念：单线程，主线程和合成线程。
虽然说浏览器执行js是单线程执行（注意，是执行，并不是说浏览器只有1个线程，而是运行时，runing），但实际上浏览器的2个重要的执行线程，这 2 个线程协同工作来渲染一个网页：主线程和合成线程。
一般情况下，主线程负责：运行 JavaScript；计算 HTML 元素的 CSS 样式；页面的布局；将元素绘制到一个或多个位图中；将这些位图交给合成线程。
相应地，合成线程负责：通过 GPU 将位图绘制到屏幕上；通知主线程更新页面中可见或即将变成可见的部分的位图；计算出页面中哪部分是可见的；计算出当你在滚动页面时哪部分是即将变成可见的；当你滚动页面时将相应位置的元素移动到可视区域。

 

原因就是主线程和合成线程的调度不合理。
下面来详细说一下调度不合理的原因：

在使用height，width，margin，padding作为transition的值时，会造成浏览器主线程的工作量较重，例如从margin-left：-20px渲染到margin-left:0，主线程需要计算样式margin-left:-19px,margin-left:-18px，一直到margin-left:0，而且每一次主线程计算样式后，合成进程都需要绘制到GPU然后再渲染到屏幕上，前后总共进行20次主线程渲染，20次合成线程渲染，20+20次，总计40次计算。

主线程的渲染流程，可以参考浏览器渲染网页的流程：

使用 HTML 创建文档对象模型（DOM）
使用 CSS 创建 CSS 对象模型（CSSOM）
基于 DOM 和 CSSOM 执行脚本（Scripts）
合并 DOM 和 CSSOM 形成渲染树（Render Tree）
使用渲染树布局（Layout）所有元素
渲染（Paint）所有元素

也就是说，主线程每次都需要执行Scripts，Render Tree ,Layout和Paint这四个阶段的计算。

而如果使用transform的话，例如tranform:translate(-20px,0)到transform:translate(0,0)，主线程只需要进行一次tranform:translate(-20px,0)到transform:translate(0,0)，然后合成线程去一次将-20px转换到0px，这样的话，总计1+20计算。

可能会有人说，这才提升了19次，有什么好性能提升的？
假设一次10ms。
那么就减少了约190ms的耗时。
会有人说，辣鸡，才190ms，无所谓。
那么如果margin-left是从-200px到0呢，一次10ms，10ms*199≈2s。
还会有人说，辣鸡，也就2s，无所谓。
你忘了单线程这回事了吗？
如果网页有3个动画，3*2s=6s，就是6s的性能提升。

改之前效果图：

代码如下：

      .cloud1 {
        position: absolute;
        top: px2rem(69);
        left: px2rem(218);
        width: px2rem(312);
        height: px2rem(102);
        @include move(move1, 218, 70);
      }
      .cloud2 {
        position: absolute;
        top: px2rem(231);
        left: px2rem(-20);
        width: px2rem(156);
        height: px2rem(51);
        @include move(move2, -20, -80);
      }


// 控制元素左右移动(如：云)
@mixin move($animationName, $start, $distance) {
  -webkit-animation: $animationName 20s infinite;
  -o-animation: $animationName 20s infinite;
  animation: $animationName 20s infinite;
  @keyframes #{$animationName} {
    0% {
      left: px2rem($start);
    }
    25% {
      left: px2rem($start + $distance);
    }
    50% {
      left: px2rem($start);
    }
    75% {
      left: px2rem($start - $distance);
    }
    100% {
      left: px2rem($start);
    }
  }
}

改之后效果图（如感觉看着卡顿，是录制软件的问题，我设置10帧录制，实际很丝滑）：

代码如下（改之后还能节省一个变量名0.0）：

      .cloud1 {
        position: absolute;
        top: px2rem(69);
        left: px2rem(218);
        width: px2rem(312);
        height: px2rem(102);
        @include move(move1, 218px, 70px);
      }
      .cloud2 {
        position: absolute;
        top: px2rem(231);
        left: px2rem(-20);
        width: px2rem(156);
        height: px2rem(51);
        @include move(move2, -20px, -80px);
      }

// 控制元素左右移动(如：云)
@mixin move($animationName, $start, $distance) {
  -webkit-animation: $animationName 20s infinite;
  -o-animation: $animationName 20s infinite;
  animation: $animationName 20s infinite;
  @keyframes #{$animationName} {
    0% {
      transform: translate3d(0, 0, 0);
    }
    25% {
      transform: translate3d($distance, 0, 0);
    }
    50% {
      transform: translate3d(0, 0, 0);
    }
    75% {
      transform: translate3d(-$distance, 0, 0);
    }
    100% {
      transform: translate3d(0, 0, 0);
    }
  }
}