动画定时器之requestAnimationFrame和cancelAnimationFrame

属性阐述

• requestAnimationFrame

  定义：h5提供的专门用于动画请求的api，请求动画帧。
  特点：requestAnimationFrame的动画时间间隔为机器时间间隔，一般笔记本每16.7ms刷新一次。
  优势：由于requestAnimationFrame是由系统控制的，当页面没有激活时，页面动画会处于暂停状态，当页面被激活时，开始动画，很好的节省了cup。在高频率事件(resize,scroll等)中，为了防止在一个刷新间隔内发生多次函数执行，使用requestAnimationFrame可保证每个刷新间隔内，函数只被执行一次，这样既能保证流畅性，也能更好的节省函数执行的开销。一个刷新间隔内函数执行多次时没有意义的，因为显示器每16.7ms刷新一次，多次绘制并不会在屏幕上体现出来。
  使用方式：

  var requestID = void 0;
  function render(){
  	xxx...
  	requestID = window.requestAnimationFrame(render);
  }
  

• cancelAnimationFrame

  定义：cancelAnimationFrame()方法用于取消以前通过对window.requestAnimationFrame()的调用计划的动画帧请求。
  使用方式：

  window.cancelAnimationFrame（requestID）;
  

要点提醒

由于动画帧有浏览器兼容性问题，特别是ie10一下均不支持，安卓也要到4.4以上，所以需要做兼容处理,使用settimeout代替,具体参考requestAnimationFrame-git

代码演示

/*html*/
<div class="save_money_box02">
  <img class="tit" src="https://oss-image.dfs168.com/market/588/tit02.png" alt="" />
  <div class="scroll_box canScroll" id="01">
    <div class="con will_move">
      <ul class="act_box actBox">
        <li class="act_item">
          <div class="content">
            <img class="act_img" src="https://oss-image.dfs168.com/market/588/fl2_act01.png" alt="" />
            <img class="icon_img" src="https://oss-image.dfs168.com/market/588/state04.png" alt="" />
          </div>
          <div class="content">
            <img class="act_img" src="https://oss-image.dfs168.com/market/588/fl2_act02.png" alt="" />
            <img class="icon_img" src="https://oss-image.dfs168.com/market/588/state04.png" alt="" />
          </div>
        </li>
        <li class="act_item">
          <div class="content">
            <img class="act_img" src="https://oss-image.dfs168.com/market/588/fl2_act01.png" alt="" />
            <img class="icon_img" src="https://oss-image.dfs168.com/market/588/state04.png" alt="" />
          </div>
          <div class="content">
            <img class="act_img" src="https://oss-image.dfs168.com/market/588/fl2_act02.png" alt="" />
            <img class="icon_img" src="https://oss-image.dfs168.com/market/588/state04.png" alt="" />
          </div>
        </li>
        <li class="act_item">
          <div class="content">
            <img class="act_img" src="https://oss-image.dfs168.com/market/588/fl2_act01.png" alt="" />
            <img class="icon_img" src="https://oss-image.dfs168.com/market/588/state04.png" alt="" />
          </div>
          <div class="content">
            <img class="act_img" src="https://oss-image.dfs168.com/market/588/fl2_act02.png" alt="" />
            <img class="icon_img" src="https://oss-image.dfs168.com/market/588/state04.png" alt="" />
          </div>
        </li>
        <li class="act_item">
          <div class="content">
            <img class="act_img" src="https://oss-image.dfs168.com/market/588/fl2_act01.png" alt="" />
            <img class="icon_img" src="https://oss-image.dfs168.com/market/588/state04.png" alt="" />
          </div>
          <div class="content">
            <img class="act_img" src="https://oss-image.dfs168.com/market/588/fl2_act02.png" alt="" />
            <img class="icon_img" src="https://oss-image.dfs168.com/market/588/state04.png" alt="" />
          </div>
        </li>              
      </ul>
      <ul class="act_box actBox">
        <li class="act_item">
          <div class="content">
            <img class="act_img" src="https://oss-image.dfs168.com/market/588/fl2_act01.png" alt="" />
            <img class="icon_img" src="https://oss-image.dfs168.com/market/588/state04.png" alt="" />
          </div>
          <div class="content">
            <img class="act_img" src="https://oss-image.dfs168.com/market/588/fl2_act02.png" alt="" />
            <img class="icon_img" src="https://oss-image.dfs168.com/market/588/state04.png" alt="" />
          </div>
        </li>
        <li class="act_item">
          <div class="content">
            <img class="act_img" src="https://oss-image.dfs168.com/market/588/fl2_act01.png" alt="" />
            <img class="icon_img" src="https://oss-image.dfs168.com/market/588/state04.png" alt="" />
          </div>
          <div class="content">
            <img class="act_img" src="https://oss-image.dfs168.com/market/588/fl2_act02.png" alt="" />
            <img class="icon_img" src="https://oss-image.dfs168.com/market/588/state04.png" alt="" />
          </div>
        </li>
        <li class="act_item">
          <div class="content">
            <img class="act_img" src="https://oss-image.dfs168.com/market/588/fl2_act01.png" alt="" />
            <img class="icon_img" src="https://oss-image.dfs168.com/market/588/state04.png" alt="" />
          </div>
          <div class="content">
            <img class="act_img" src="https://oss-image.dfs168.com/market/588/fl2_act02.png" alt="" />
            <img class="icon_img" src="https://oss-image.dfs168.com/market/588/state04.png" alt="" />
          </div>
        </li>
        <li class="act_item">
          <div class="content">
            <img class="act_img" src="https://oss-image.dfs168.com/market/588/fl2_act01.png" alt="" />
            <img class="icon_img" src="https://oss-image.dfs168.com/market/588/state04.png" alt="" />
          </div>
          <div class="content">
            <img class="act_img" src="https://oss-image.dfs168.com/market/588/fl2_act02.png" alt="" />
            <img class="icon_img" src="https://oss-image.dfs168.com/market/588/state04.png" alt="" />
          </div>
        </li>              
      </ul>           
    </div>
  </div>
</div>

/* css */
save_money_box02 {
	width: 100%;
	padding-top: .73rem;
	box-sizing: border-box;
}

.save_money_box02 .scroll_box {
	width: 100%;
	margin-top: -.08rem;
	overflow-x: scroll;
}

.save_money_box02 .con {
	white-space: nowrap;
}

.save_money_box02 .act_box {
	width: 11.76rem;
	display: inline-block;

}

.save_money_box02 .act_item {
	width: 2.64rem;
	margin-left: .24rem;
	display: inline-block;
}

.save_money_box02 .act_item .content {
	width: 100%;
	position: relative;
}

.save_money_box02 .act_item .act_img {
	display: block;
	width: 100%;
}

.save_money_box02 .act_item .icon_img {
	display: block;
	width: 1.86rem;
	position: absolute;
	bottom: .32rem;
	right: 0;
}


/* js */
//滑动动画
var canMove = !1,
timer = null,
anTimer = null,
anFn= void 0,
move = 0;
$('.scroll_box').on('scroll',function () {
  if (canMove) {
    timer = setTimeout(()=>{
      anTimer = setTimeout(moveLeft,300);
      canMove = !1;
    },100)
  }
});

$('.scroll_box').on('touchstart',function () {
  cancelAnimationFrame(anFn);
  canMove = !0;
});

$('.scroll_box').on('touchend',function () {
  canMove = !0;
  clearTimeout(timer);
  move = $(this).scrollLeft();
  console.log(move,'move')
  anTimer = setTimeout(moveLeft, 300)
});

moveLeft();
function moveLeft() {
  cancelAnimationFrame(anFn);

  move++;
  if ( move >= $(".scroll_box .act_box").outerWidth() * 2 - $(document.body).outerWidth(true) ) {
    move = $(".scroll_box .act_box").outerWidth() - $(document.body).outerWidth(true) - 4;
    console.log(1,move)
  } else if (move <= 0) {
    move = $(".scroll_box .act_box").outerWidth();
    console.log(2,move)
  }

  $(".save_money_box02 .canScroll").scrollLeft(move);

  anFn = requestAnimationFrame(moveLeft)
}