返回列表 回复 发帖

[JavaScript] js缓动动画

requestAnimationFrame兼容
  1. // requestAnimationFrame的兼容处理
  2. if (!window.requestAnimationFrame) {
  3.     requestAnimationFrame = function(fn) {
  4.         setTimeout(fn, 17);
  5.     };       
  6. }
复制代码
用一个简单的公式表示就是:

A = A + (B - A) / 2

翻译一下就是:

我下一秒的位置 = 现在位置 + 现在和初恋之间距离的一半

是不是很好理解。

而上面的A = A + (B - A) / 2就是本文要介绍的即插即用的缓动小算法。
  1. // 滚动到顶部缓动实现
  2. // rate表示缓动速率,默认是2
  3. var backToTop = function (rate) {
  4.     var doc = document.body.scrollTop? document.body : document.documentElement;
  5.     var scrollTop = doc.scrollTop;
  6.    
  7.     var top = function () {
  8.         scrollTop = scrollTop + (0 - scrollTop) / (rate || 2);
  9.         
  10.         // 临界判断,终止动画
  11.         if (scrollTop < 1) {
  12.             doc.scrollTop = 0;
  13.             return;
  14.         }
  15.         doc.scrollTop = scrollTop;
  16.         // 动画gogogo!
  17.         requestAnimationFrame(top);   
  18.     };
  19.     top();
  20. };
复制代码
等比例靠近理论上最终只会无穷靠近,并不会真正的相等,也就是动画永远没有结束的时候,所以说需要做一个临界判断,也就是距离小到一定数目的时候,直接等于目标值,并终止动画。例如,上面的返回顶部,就是当距离顶部滚动高度小于1的时候,直接返回顶部,并终止动画。
  1. if (scrollTop < 1) {
  2.     doc.scrollTop = 0;
  3.     return;
  4. }
复制代码
如果项目很多地方使用该算法,每次都写一遍requestAnimationFrame和边界判断是很啰嗦的,于是,我们可以把算法变个身,例如下面这样:
  1. Math.easeout = function (A, B, rate, callback) {
  2.     if (A == B || typeof A != 'number') {
  3.         return;   
  4.     }
  5.     B = B || 0;
  6.     rate = rate || 2;
  7.    
  8.     var step = function () {
  9.         A = A + (B - A) / rate;
  10.         
  11.         if (A < 1) {
  12.             callback(B, true);
  13.             return;
  14.         }
  15.         callback(A, false);
  16.         requestAnimationFrame(step);   
  17.     };
  18.     step();
  19. };
复制代码
其中:
  • A是起始位置;
  • B是目标位置;
  • rate是缓动速率;
  • callback是变化的位置回调,支持两个参数,value和isEnding,表示当前的位置值(数值)以及是否动画结束了(布尔值);
于是,我们的返回顶部效果可以这么使用:
  1. var doc = document.body.scrollTop? document.body : document.documentElement;
  2. Math.easeout(doc.scrollTop, 0, 4, function (value) {
  3.     doc.scrollTop = value;
  4. });
复制代码
转自:http://www.zhangxinxu.com/wordpr ... ation-algorithm-js/
返回列表