后宮請翻Tween.js

1. 先快后慢的緩動動畫

用一個簡單的公式表示就是：

A = A + (B - A) / 2;

用人話講就是：

我下一秒的位置 = 現在位置 + 現在和初戀之間距離的一半

先來介紹下requestAnimationFrame，對于不支持的瀏覽器，采用下面的兼容寫法：

if (!window.requestAnimationFrame) {
  requestAnimationFrame = function(fn) {
    setTimeout(fn, 17);  
  }
}

下面來看一個??子：

var back_to_top = function(rate) {
  var doc = document.body.scrollTop ? document.body : document.documentElement,
  scrollTop = doc.scrollTop;
  var top = function() {
    scrollTop += (0 - scrollTop) / (rate || 2);
    // 臨界判斷，終止動畫
    if (scrollTop < 1) {
      doc.scrollTop = 0;
      return;
    }
    doc.scrollTop = scrollTop;
    requestAnimationFrame(top);
  };
  top();
}

2. 小算法變身

Math.easeOut = function(A, B, rate, callback) {
  if (A == B || typeof A != 'number') {
    return;
  }
  B = B || 0;
  rate = rate || 2;
  var step = function() {
    A = A + (B - A) / rate;
    if (A < 1) {
      callback(B, true);
      return;
    }
    callback(A, false);
    requestAnimationFrame();
  };
  step();
}

于是，我們的返回頂部效果可以這么使用：

var doc = document.body.scrollTop? document.body : document.documentElement;
Math.easeout(doc.scrollTop, 0, 4, function (value) {
    doc.scrollTop = value;
});