動畫定時器之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)
}