缓动动画js小算法

后宫请翻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;
});