html页面动画的实现方式及性能分析

写之前：不当之处还请指正，欢迎留言探讨~

html页面动画的实现方式：
　　1、canvas           着重于图像处理，弱于交互效果，所以动画只能借由定时器或requestAnimationFrame不停的重绘来实现
　　2、svg 　　         以Html标签为基础，标签改变时即时渲染
　　3、transition        可控制元素的css属性值(如left、top等)在一定时间内平滑过渡，即简单动画
　　4、transform       控制元素的变形，如旋转、伸缩等，是静态的变化，如果想以动画的形式看到变化需配合transition或animation。该属性可触发gpu加速
　　5、animation 　  css3的动画实现属性
　　6、Js定时器或requestAnimationFrame控制元素的属性，如left、top等以实现动画

下述示例公用样式：

.tt {
      width: 200px;
      height: 200px;
      background: red;
      z-index: 100;
      position: absolute;
    }

 

上述几种方式在页面上的表现：

 

1、Js定时器和requestAnimationFrame

　　动画效果：平行移动。 

　　问题：当主线程、渲染线程被占用16ms(1秒60帧的动画为流畅动画，所以每帧的间隔大约是16ms)以上时，会出现卡顿的现象；当主线程、渲染线程被占用时，出现计时执行间隔不准确的问题

　　描述及解决办法：可以使用多线程，如Worker来准确的计时，但不能解决卡顿的问题

　　示例代码Html：　　

<div onclick="toggleFloatPanel()" id="leftView" style="width:353px;background:green;height:500px;position:absolute;">
    点我用定时器平行移动</div>

 

 

示例代码Js：

function toggleFloatPanel() {      
          var panelState = 1; //1 展开    0 折叠
          var left = 0;
          var leftPanel = document.getElementById("leftView");
          var originalLeft = 40;
          var originalRight = 40;
          var min = -352;
          var leftState = true;
          timeOutFn();
    
          function timeOutFn() {
            // setTimeout(function () {
            //   setLeft();
            //   timeOutFn();
            // }, 16);
            setLeft();
            requestAnimationFrame(timeOutFn);
          }
    
          function setLeft() {
            panelState == 1
              ? (left = left - 10)
              : (left = left + 10);
            left <= min
              ? (panelState = 0)
              : left >= originalLeft
                ? (panelState = 1)
                : "";
            leftPanel.style.left = left + "px";
          }
        
    }

 

2、canvas 

　　动画效果：平行移动。
　　问题：同Js定时器
　　原因：因为canvas的动画借助于定时器或requestAnimationFrame不停的重绘来实现，所以见第1关于定时器和requestAnimationFrame的说明

　　示例代码Html：　　

<div id="divTransitionCanvasTest" class="tt"
    style=" margin: 0 0px 0px 59%;background:none;width:600px;border:solid 1px red;" onclick="canvasChange()">
    <div style="position: absolute;color:yellow;">点击观看canvas移动</div>
    <canvas id="canvas" height="200" width="600"></canvas>
  </div>

 

　　示例代码Js：

var canvasX = 0;
    var canvasColor = 'green';
    var liner = 1;    //1 向右   0向左
      var leftChange = 10;
      function canvasRoate() {
        var oCanvas = document.getElementById("canvas");
        var context = oCanvas.getContext("2d");
        context.fillStyle = canvasColor;
        context.fillRect(canvasX, 0, 200, 200);
      }
      function canvasChange() {
        var oCanvas = document.getElementById("canvas");
        var context = oCanvas.getContext("2d");
        context.clearRect(canvasX, 0, 200, 200);
        liner == 1 ? canvasX += leftChange : canvasX -= leftChange;
        liner == 1 && canvasX > 400 ? (liner = 0, canvasX = 400 - leftChange) : liner == 0 && canvasX < 0 ? (liner = 1, canvasX = leftChange) : '';
        context.fillStyle = canvasColor;
        context.fillRect(canvasX, 0, 200, 200);
        setTimeout(function () {
          canvasChange();
        }, 16);

        // var worker = new Worker("./toggleWork.js");
        // worker.onmessage = function (event) {
        //   var _obj = event.data;
        //   var oCanvas = document.getElementById("canvas");
        //   // var webglContext = oCanvas.getContext("webgl");
        //   // console.log(webglContext);
        //   var context = oCanvas.getContext("2d");
        //   context.clearRect(_obj.oldCanvasX, 0, 200, 200);
        //   context.fillStyle = canvasColor;
        //   context.fillRect(_obj.newCanvasX, 0, 200, 200);
        // };
      }

 

3、svg
　　动画效果：无限旋转。
　　问题：在主线程或渲染线程被其他操作占用16ms以上时出现卡顿，其他时候运行流畅
　　原因：svg的动画会持续性的引起页面的重绘，然后调用渲染线程重新渲染。当页面的主线程或者渲染线程被占用时，造成svg动画卡顿

　　示例代码Html：

<div id="divSvgContainer" style="margin:0 0 0 20%;background:none;position:absolute;z-index:100;">
    <svg xmlns="http://www.w3.org/2000/svg">
      <g>
        <rect x="0" y="0" width="200" height="200" fill="yellow" stroke="red" stroke-width="1" transform="rotation">
          <animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="5s" type="rotate3d"
            from="0 100 100" to="360 100 100" repeatCount="indefinite" />
        </rect>
        <text x="0" y="15" fill="red">svg无限旋转</text>
      </g>
    </svg>
  </div>

 

 

4、transition和transform
　　动画效果：旋转一周。
　　问题：动画开始前和结束后，此时若主线程或渲染线程被其他操作占用则现卡顿，动画运行过程中不会卡顿
　　原因：同第5 animation 的描述

　　示例代码Html：　　

<div id="divTransitionTest" class="tt" style=" margin: 0 0px 0px 33%;">悬浮时使用transition和transform旋转一周</div>

 

　　示例代码Css：

/**悬浮时旋转一周start 使用transition */
    #divTransitionTest:hover {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
      -webkit-transition: -webkit-transform 3s linear;
      transition: transform 3s linear;
    }

    /**悬浮时旋转一周end 使用transition */

 

5、animation和transform
　　动画效果：无限旋转。
　　问题：同4。
　　原因：动画即将开始前和结束后各触发一次页面的重绘，所以在重绘时，如果主线程或者渲染线程被占用，则会卡顿，但在动画运行期间内不会卡顿。

　　示例代码Html:

<div id="divTransitionAniTest" class="tt" style=" margin: 0 0px 0px 46%;">悬浮时使用animation和transform无限旋转</div>

 

　　示例代码Css：

/**悬浮时无限旋转start 使用transition和animation */
    #divTransitionAniTest:hover {
      -webkit-animation: spin 2s linear infinite;
      animation: spin 2s linear infinite;

    }

    @-webkit-keyframes spin {
      from {
        -webkit-transform: rotate(0deg);
      }

      to {
        -webkit-transform: rotate(360deg);
      }
    }

    @keyframes spin {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }

    /**悬浮时无限旋转end 使用transition和animation */

 

6、transition
　　动画效果：平行移动
　　问题：在主线程或渲染线程被其他操作占用16ms以上时出现卡顿，其他时候运行流畅。
　　原因：transition在过渡元素属性的过程中，会持续性的引起重绘，如果主线程或者渲染线程被占用超过16ms，则会卡顿

　　示例代码Html：

<div id="divTransition" class="tt" style="margin: 12% 0px 0px 46%;"
    onclick="$('#divTransition').addClass('divTransition_run');">使用transition平行移動</div>

 

　　示例代码Css：

/**悬浮时平行移动start 使用transition */
    .divTransition_run {
      margin-left: 80% !important;
      transition: left 2000ms linear 1ms;
      -webkit-transition: margin-left 3000ms linear 1ms;
      -moz-transition: left 2000ms linear 1ms;
      -o-transition: left 2000ms linear 1ms;

    }

    /**悬浮时平行移动end 使用transition */