[关闭]
@15013890200 2018-10-17T15:02:17.000000Z 字数 3413 阅读 515

动画效果比较

animation requestAnimationFrame setInterval

对前端人员来说，要想做出酷炫的动画效果还是需要下点功夫的，实现的途径也是有很多的，以下介绍和比较实现动画效果的几种途径。

1、transition

通过控制元素的一个或多个属性再设置相关过渡时间就可以实现较为简单的过渡动画了（需要做兼容）
特点：可以用来做某一过程的动画。

  1.  .class{...,transtion width 0.5s;-webkit-transition: width 0.5s;}

2、animation

使用比transition略复杂，但是功能比transition更多。（需要做兼容）
特点：不仅可以做某一过程的动画还可以做循环动画。还可以定义每一个过程怎样执行。但是很难控制动画的执行与暂停，一般用来做纯展示，不涉及到交互。

  1. .class{...,animation move 0.5s infinite;}
  2. @keyframes move{
  3.     from {...}
  4.     to {...}
  5.     /** 也可以自定义过程细节 */
  6. }

3、借助setTimeout、setInterval

利用定时器不停调用某一动画过程，实现特定动画效果。可以很方便的控制动画的执行
如果是做不断重复动画效果interval的使用要优于timeout
缺点：很耗性能，重复调用某个动画很可能出现丢帧的现象（js单线程的缘故）

4、调用requestAnimationFrame api

web api接口，通过传入回调函数，不断的触发动画执行。相应的取消执行接口为cancelAnimationFrame方法，用法类似于clearTimeout和clearInterval。
特点：性能要优于setTimeout和setInterval。
与#3的区别：定时器是代码定时告知浏览器执行某一过程，当遇到线程阻塞时，执行时间就会后移，从而产生丢帧现象。web api是浏览器层面的主动行为，优化了动画的执行过程。

以下附上animation、setInterval、requestAnimationFrame三者的使用demo

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>requestAnimationFrame API</title>
  6.     <style>
  7.         .div_rotate{width: 200px;height: 200px;border:1px solid #ddd;display: flex;align-items: center;justify-content: center;border-radius: 5px;background-color: #ddd;position: relative;user-select: none;float: left;}
  8.         .div_rotate2{width: 400px;height: 400px;border:1px solid #ddd;display: flex;align-items: center;justify-content: center;border-radius: 50%;background-color: #ddd;margin-left: 100px;user-select: none;float: left;background: url(imgs/award2.png) no-repeat center;background-size: 100% 100%;}
  9.         @-webkit-keyframes move{
  10.             /*20%{margin-left: 100px;width: 100px;height: 200px;}
  11.             50%{height: 300px;width: 100px;}
  12.             100%{background-color: #bbb;}*/
  13.             from {transform: rotate(0deg);}
  14.             to {transform: rotate(360deg);}
  15.         }
  16.         @keyframes move{
  17.             from {transform: rotate(0deg);}
  18.             to {transform: rotate(360deg);}
  19.         }
  20.     </style>
  21. </head>
  22. <body>
  23.     <div class="div_rotate">hhh</div>
  24.     <div class="div_rotate2"></div>
  25.     <script type="text/javascript">
  26.         var util = {
  27.             addListener: function(ele,type,handle){
  28.                 if(ele.addEventListener){
  29.                     ele.addEventListener(type,handle);
  30.                 }
  31.                 else if(ele.attachEvent){
  32.                     ele.attachEvent('on'+type,handle);
  33.                 }
  34.                 else{
  35.                     ele['on'+type] = handle;
  36.                 }
  37.             },
  38.             removeListener: function(ele,type,handle){
  39.                 if(ele.removeListener){
  40.                     ele.removeListener(type,handle);
  41.                 }
  42.                 else if(ele.detachEvent){
  43.                     ele.detachEvent('on'+type,handle);
  44.                 }
  45.                 else{
  46.                     ele['on'+type] = null;
  47.                 }
  48.             }
  49.         }
  50.         var div_rotate = document.querySelector('.div_rotate');
  51.         util.addListener(div_rotate,'click',rotate);
  52.         /** 借助css3实现动画轮转 **/
  53.         function rotate(e){
  54.             e = e || window.event;
  55.             var target = e.target || e.srcElement;
  56.             if(target.style.animation){
  57.                 target.style.animation = '';
  58.                 target.style['-webkit-animation'] = '';
  59.             }
  60.             else{
  61.                 target.style.animation = 'move .1s infinite';
  62.                 target.style['-webkit-animation'] = 'move .1s infinite';
  63.             }           
  64.         }
  65.         var div_rotate2 = document.querySelector('.div_rotate2');
  66.         var animationId = null,intervalId = null;
  67.         util.addListener(div_rotate2,'click',ctrlRotate)
  68.         function rotate2(){
  69.             var target = div_rotate2;
  70.             var deg = target.style.transform;
  71.             if(deg){
  72.                 deg = deg.match(/rotate\((\d*)deg/)[1];
  73.                 deg = parseInt(deg)+15;
  74.             }
  75.             else{
  76.                 deg = 15;
  77.             }
  78.             target.style.transform = 'rotate(' + deg + 'deg)';  
  80.             /** 调用requestAnimationFrame api实现轮转动画，性能更好 **/      
  81.             if(window.requestAnimationFrame){
  82.                 if(animationId)window.cancelAnimationFrame(animationId)
  83.                 animationId = window.requestAnimationFrame(rotate2)
  84.             }
  85.         }
  86.         function ctrlRotate(){
  87.             /** 借用interval实现动画轮转 **/
  88.             // if(intervalId){
  89.             //  clearInterval(intervalId);
  90.             //  intervalId = null;
  91.             // }
  92.             // else{
  93.             //  intervalId = setInterval(function(){
  94.             //      rotate2();
  95.             //  },16)
  96.             // }
  98.             /** 借助requestAnimationFrame **/
  99.             if(animationId){
  100.                 window.cancelAnimationFrame(animationId);
  101.                 animationId = null;
  102.             }
  103.             else{
  104.                 rotate2();
  105.             }
  106.         }
  107.         ctrlRotate()
  108.     </script>
  109. </body>
  110. </html>
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注