资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/JS进阶篇--window.requestAnimationFrame与Tween.js配合使用实现

JS进阶篇--window.requestAnimationFrame与Tween.js配合使用实现

zorpan / 3203人阅读

摘要：注意如果想得到连贯的逐帧动画，函数中必须重新调用。如果你想做逐帧动画的时候，你应该用这个方法。这个回调函数会收到一个参数，这个类型的参数指示当前时间距离开始触发的回调的时间。

window.requestAnimationFrame 概述

window.requestAnimationFrame()这个方法是用来在页面重绘之前，通知浏览器调用一个指定的函数，以满足开发者操作动画的需求。这个方法接受一个函数为参，该函数会在重绘前调用。

注意: 如果想得到连贯的逐帧动画，函数中必须重新调用 requestAnimationFrame()。

如果你想做逐帧动画的时候，你应该用这个方法。这就要求你的动画函数执行会先于浏览器重绘动作。通常来说，被调用的频率是每秒60次，但是一般会遵循W3C标准规定的频率。如果是后台标签页面，重绘频率则会大大降低。

回调函数只会被传入一个DOMHighResTimeStamp参数，这个参数指示当前被 requestAnimationFrame 序列化的函数队列被触发的时间。因为很多个函数在这一帧被执行，所以每个函数都将被传入一个相同的时间戳，尽管经过了之前很多的计算工作。这个数值是一个小数，单位毫秒，精确度在 10 µs。

语法 
</>复制代码 
  1. requestID = window.requestAnimationFrame(callback);// Firefox 23 / IE10 / Chrome / Safari 7 (incl. iOS)
  2. requestID = window.mozRequestAnimationFrame(callback);// Firefox < 23
  3. requestID = window.webkitRequestAnimationFrame(callback);// Older versions Chrome/Webkit
参数

callback在每次需要重新绘制动画时,会调用这个参数所指定的函数。这个回调函数会收到一个参数，这个 DOMHighResTimeStamp 类型的参数指示当前时间距离开始触发 requestAnimationFrame 的回调的时间。

返回值

requestID 是一个长整型非零值,作为一个唯一的标识符.你可以将该值作为参数传给 window.cancelAnimationFrame() 来取消这个回调函数。

例子 
</>复制代码 
  1. window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  2. var start = null;
  3. var d = document.getElementById("SomeElementYouWantToAnimate");
  4. function step(timestamp) { 
  5.   if (start === null) start = timestamp;
  6.   var progress = timestamp - start;
  7.   d.style.left = Math.min(progress/10, 200) + "px";
  8.   if (progress < 2000) {
  9.     requestAnimationFrame(step);
  10.   }
  11. }
  12. requestAnimationFrame(step);
Tween.js

tween.js源码如下：

</>复制代码 
  1. /*
  2.  * Tween.js
  3.  * t: current time（当前时间）；
  4.  * b: beginning value（初始值）；
  5.  * c: change in value（变化量）；
  6.  * d: duration（持续时间）。
  7.  * you can visit "http://easings.net/zh-cn" to get effect
  8. */
  9. var Tween = {
  10.     Linear: function(t, b, c, d) { return c*t/d + b; },
  11.     Quad: {
  12.         easeIn: function(t, b, c, d) {
  13.             return c * (t /= d) * t + b;
  14.         },
  15.         easeOut: function(t, b, c, d) {
  16.             return -c *(t /= d)*(t-2) + b;
  17.         },
  18.         easeInOut: function(t, b, c, d) {
  19.             if ((t /= d / 2) < 1) return c / 2 * t * t + b;
  20.             return -c / 2 * ((--t) * (t-2) - 1) + b;
  21.         }
  22.     },
  23.     Cubic: {
  24.         easeIn: function(t, b, c, d) {
  25.             return c * (t /= d) * t * t + b;
  26.         },
  27.         easeOut: function(t, b, c, d) {
  28.             return c * ((t = t/d - 1) * t * t + 1) + b;
  29.         },
  30.         easeInOut: function(t, b, c, d) {
  31.             if ((t /= d / 2) < 1) return c / 2 * t * t*t + b;
  32.             return c / 2*((t -= 2) * t * t + 2) + b;
  33.         }
  34.     },
  35.     Quart: {
  36.         easeIn: function(t, b, c, d) {
  37.             return c * (t /= d) * t * t*t + b;
  38.         },
  39.         easeOut: function(t, b, c, d) {
  40.             return -c * ((t = t/d - 1) * t * t*t - 1) + b;
  41.         },
  42.         easeInOut: function(t, b, c, d) {
  43.             if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b;
  44.             return -c / 2 * ((t -= 2) * t * t*t - 2) + b;
  45.         }
  46.     },
  47.     Quint: {
  48.         easeIn: function(t, b, c, d) {
  49.             return c * (t /= d) * t * t * t * t + b;
  50.         },
  51.         easeOut: function(t, b, c, d) {
  52.             return c * ((t = t/d - 1) * t * t * t * t + 1) + b;
  53.         },
  54.         easeInOut: function(t, b, c, d) {
  55.             if ((t /= d / 2) < 1) return c / 2 * t * t * t * t * t + b;
  56.             return c / 2*((t -= 2) * t * t * t * t + 2) + b;
  57.         }
  58.     },
  59.     Sine: {
  60.         easeIn: function(t, b, c, d) {
  61.             return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
  62.         },
  63.         easeOut: function(t, b, c, d) {
  64.             return c * Math.sin(t/d * (Math.PI/2)) + b;
  65.         },
  66.         easeInOut: function(t, b, c, d) {
  67.             return -c / 2 * (Math.cos(Math.PI * t/d) - 1) + b;
  68.         }
  69.     },
  70.     Expo: {
  71.         easeIn: function(t, b, c, d) {
  72.             return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
  73.         },
  74.         easeOut: function(t, b, c, d) {
  75.             return (t==d) ? b + c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
  76.         },
  77.         easeInOut: function(t, b, c, d) {
  78.             if (t==0) return b;
  79.             if (t==d) return b+c;
  80.             if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
  81.             return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;
  82.         }
  83.     },
  84.     Circ: {
  85.         easeIn: function(t, b, c, d) {
  86.             return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;
  87.         },
  88.         easeOut: function(t, b, c, d) {
  89.             return c * Math.sqrt(1 - (t = t/d - 1) * t) + b;
  90.         },
  91.         easeInOut: function(t, b, c, d) {
  92.             if ((t /= d / 2) < 1) return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b;
  93.             return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;
  94.         }
  95.     },
  96.     Elastic: {
  97.         easeIn: function(t, b, c, d, a, p) {
  98.             var s;
  99.             if (t==0) return b;
  100.             if ((t /= d) == 1) return b + c;
  101.             if (typeof p == "undefined") p = d * .3;
  102.             if (!a || a < Math.abs(c)) {
  103.                 s = p / 4;
  104.                 a = c;
  105.             } else {
  106.                 s = p / (2 * Math.PI) * Math.asin(c / a);
  107.             }
  108.             return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
  109.         },
  110.         easeOut: function(t, b, c, d, a, p) {
  111.             var s;
  112.             if (t==0) return b;
  113.             if ((t /= d) == 1) return b + c;
  114.             if (typeof p == "undefined") p = d * .3;
  115.             if (!a || a < Math.abs(c)) {
  116.                 a = c; 
  117.                 s = p / 4;
  118.             } else {
  119.                 s = p/(2*Math.PI) * Math.asin(c/a);
  120.             }
  121.             return (a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b);
  122.         },
  123.         easeInOut: function(t, b, c, d, a, p) {
  124.             var s;
  125.             if (t==0) return b;
  126.             if ((t /= d / 2) == 2) return b+c;
  127.             if (typeof p == "undefined") p = d * (.3 * 1.5);
  128.             if (!a || a < Math.abs(c)) {
  129.                 a = c; 
  130.                 s = p / 4;
  131.             } else {
  132.                 s = p / (2  *Math.PI) * Math.asin(c / a);
  133.             }
  134.             if (t < 1) return -.5 * (a * Math.pow(2, 10* (t -=1 )) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
  135.             return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p ) * .5 + c + b;
  136.         }
  137.     },
  138.     Back: {
  139.         easeIn: function(t, b, c, d, s) {
  140.             if (typeof s == "undefined") s = 1.70158;
  141.             return c * (t /= d) * t * ((s + 1) * t - s) + b;
  142.         },
  143.         easeOut: function(t, b, c, d, s) {
  144.             if (typeof s == "undefined") s = 1.70158;
  145.             return c * ((t = t/d - 1) * t * ((s + 1) * t + s) + 1) + b;
  146.         },
  147.         easeInOut: function(t, b, c, d, s) {
  148.             if (typeof s == "undefined") s = 1.70158; 
  149.             if ((t /= d / 2) < 1) return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
  150.             return c / 2*((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
  151.         }
  152.     },
  153.     Bounce: {
  154.         easeIn: function(t, b, c, d) {
  155.             return c - Tween.Bounce.easeOut(d-t, 0, c, d) + b;
  156.         },
  157.         easeOut: function(t, b, c, d) {
  158.             if ((t /= d) < (1 / 2.75)) {
  159.                 return c * (7.5625 * t * t) + b;
  160.             } else if (t < (2 / 2.75)) {
  161.                 return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;
  162.             } else if (t < (2.5 / 2.75)) {
  163.                 return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;
  164.             } else {
  165.                 return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
  166.             }
  167.         },
  168.         easeInOut: function(t, b, c, d) {
  169.             if (t < d / 2) {
  170.                 return Tween.Bounce.easeIn(t * 2, 0, c, d) * .5 + b;
  171.             } else {
  172.                 return Tween.Bounce.easeOut(t * 2 - d, 0, c, d) * .5 + c * .5 + b;
  173.             }
  174.         }
  175.     }
  176. }
  177. Math.tween = Tween;
简介

动画运动算法名称如下：

Linear：线性匀速运动效果；

Quadratic：二次方的缓动（t^2）；

Cubic：三次方的缓动（t^3）；

Quartic：四次方的缓动（t^4）；

Quintic：五次方的缓动（t^5）；

Sinusoidal：正弦曲线的缓动（sin(t)）；

Exponential：指数曲线的缓动（2^t）；

Circular：圆形曲线的缓动（sqrt(1-t^2)）；

Elastic：指数衰减的正弦曲线缓动；

Back：超过范围的三次方缓动（(s+1)t^3 – st^2）；

Bounce：指数衰减的反弹缓动。

每个效果都分三个缓动方式，分别是：

easeIn：从0开始加速的缓动，也就是先慢后快；

easeOut：减速到0的缓动，也就是先快后慢；

easeInOut：前半段从0开始加速，后半段减速到0的缓动。

所有的这些缓动算法都离不开下面4个参数，t, b, c, d，含义如下：

</>复制代码 
  1. /*
  2.  * t: current time（当前时间）；
  3.  * b: beginning value（初始值）；
  4.  * c: change in value（变化量）；
  5.  * d: duration（持续时间）。
  6. */

下面用最简单的线性匀速运动来解释下：

</>复制代码 
  1. Tween.Linear = function(t, b, c, d) { 
  2.     return c*t/d + b; 
  3. }

比方说我们要从位置0的地方运动到100，时间是10秒钟，此时，b, c, d三个参数就已经确认了，b初始值就是0，变化值c就是100-0就是100，最终的时间就是10，此时，只要给一个小于最终时间10的值，Tween.Linear就会返回当前时间应该的坐标，例如，假设此时动画进行到第5秒，也就是t为5，则得到（截图自Chrome控制台）：

如何实际使用Tween.js中的缓动算法？

兼容写法：

</>复制代码 
  1. window.requestAnimFrame = (function (callback,time) {
  2.     return window.requestAnimationFrame ||
  3.         window.webkitRequestAnimationFrame ||
  4.         window.mozRequestAnimationFrame ||
  5.         window.oRequestAnimationFrame ||
  6.         window.msRequestAnimaitonFrame ||
  7.         function (callback) {
  8.             window.setTimeout(callback, time);
  9.         };
  10. })();

我们要显示一个动画效果，例如，还是拿上面的线性效果举例，则代码可以变成：

</>复制代码 
  1. var t = 0, b = 0, c = 100, d = 10;
  2. var step = function () {
  3.     // value就是当前的位置值
  4.     // 例如我们可以设置DOM.style.left = value + "px"实现定位
  5.     var value = Tween.Linear(t, b, c, d);
  6.     t++;
  7.     if (t <= d) {
  8.          // 继续运动
  9.          requestAnimationFrame(step);
  10.     } else {
  11.         // 动画结束
  12.     }
  13. };

基本上，所有的动画使用都是这个套路。

参考地址:
缓动函数速查表：http://easings.net/zh-cn
http://www.zhangxinxu.com/wor...

云服务器 GPU云服务器 tween.js 进阶篇 webrtc进阶 信令篇 webrtc进阶-信令篇

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81511.html

相关文章

  • JS进阶篇--window.requestAnimationFrame与Tween.js配合使用实现

    摘要：注意如果想得到连贯的逐帧动画，函数中必须重新调用。如果你想做逐帧动画的时候，你应该用这个方法。这个回调函数会收到一个参数，这个类型的参数指示当前时间距离开始触发的回调的时间。 window.requestAnimationFrame 概述 window.requestAnimationFrame()这个方法是用来在页面重绘之前，通知浏览器调用一个指定的函数，以满足开发者操作动画的需求。...

    Ilikewhite 评论0 收藏0

  • JS进阶篇--window.requestAnimationFrame与Tween.js配合使用实现

    摘要：注意如果想得到连贯的逐帧动画，函数中必须重新调用。如果你想做逐帧动画的时候，你应该用这个方法。这个回调函数会收到一个参数，这个类型的参数指示当前时间距离开始触发的回调的时间。 window.requestAnimationFrame 概述 window.requestAnimationFrame()这个方法是用来在页面重绘之前，通知浏览器调用一个指定的函数，以满足开发者操作动画的需求。...

    codergarden 评论0 收藏0

  • JS进阶篇--window.requestAnimationFrame与Tween.js配合使用实现

    摘要：注意如果想得到连贯的逐帧动画，函数中必须重新调用。如果你想做逐帧动画的时候，你应该用这个方法。这个回调函数会收到一个参数，这个类型的参数指示当前时间距离开始触发的回调的时间。 window.requestAnimationFrame 概述 window.requestAnimationFrame()这个方法是用来在页面重绘之前，通知浏览器调用一个指定的函数，以满足开发者操作动画的需求。...

    Riddler 评论0 收藏0

  • JS—动画缓动—tween.js

    摘要：动画运动算法线性匀速运动效果二次方的缓动三次方的缓动四次方的缓动五次方的缓动正弦曲线的缓动指数曲线的缓动圆形曲线的缓动指数衰减的正弦曲线缓动超过范围的三次方缓动指数衰减的反弹缓动。 requestAnimFrame兼容 window.requestAnimFrame = (function (callback,time) { return window.requestAnima...

    wangxinarhat 评论0 收藏0

发表评论

登陆后可评论

0条评论

zorpan

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<