(function() { var lastTime = 0; var vendors = ['ms', 'moz', 'webkit', 'o']; for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame']; } if (!window.requestAnimationFrame) window.requestAnimationFrame = function(callback, element) { var currTime = new Date().getTime(); var timeToCall = Math.max(0, 16 - (currTime - lastTime)); var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall); lastTime = currTime + timeToCall; return id; }; if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function(id) { clearTimeout(id); }; }());
最后是简单的实例应用，很简单，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>使用tweenjs</title> <style type="text/css"> div { width: 100px; height: 100px; border: 1px solid red; text-align: center; line-height: 100px; position: absolute; } </style> </head> <body> <div> 这是测试 </div> <script type="text/javascript" src="https://www.jb51.net/RequestAnimationFrame.js"></script> <script type="text/javascript" src="https://www.jb51.net/tween.js"></script> <script type="text/javascript"> var DOM=document.getElementById("test"); var t = 0,//开始时间 b = 0,//开始位置 c = 1000,//变化值 d = 100;//持续时间 var step = function() { var value = Tween.Bounce.easeOut(t, b, c, d); DOM.style.left = value + 'px'; t++; if (t <= d) { // 继续运动 requestAnimationFrame(step); } else { // 动画结束 } }; step(); </script> </body> </html>
具体使用中，需要参数以及控制好结束条件即可。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript页面元素操作技巧总结》、《JavaScript操作DOM技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》