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