requestAnimationFrame 兼容处理

(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);
    };
}());
时间: 2024-12-08 21:34:59

requestAnimationFrame 兼容处理的相关文章

requestAnimationFrame 兼容不同浏览器

简单兼容: window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 60); }; })(); 但是呢,并不是所有设备的绘制时间间隔是100

requestAnimationFrame 兼容方案

目录 html代码 css代码 JavaScript代码 编写涉及:css, html, js 在线演示codepen html代码 <div class="roll-box"> <div class="inner-box">move</div> </div> <button onclick="startMove()"> start move</button> css代码 .

动画优化之window.requestAnimationFrame()

requestAnimationFrame解决了浏览器不知道javascript动画什么时候开始.不知道最佳循环间隔时间的问题. 编写动画循环的关键,是要知道延迟时间多长合适.一方面,循环时间必须足够短,这样才能保证动画效果更平滑流畅:另一方面,循环还要足够长,这样才能保证浏览器有能力渲染产生的变化.大多数显示器的刷新频率是60Hz,相当于每秒钟重绘60次.大多数浏览器都会对重绘操作加以限制,不超过显示器的重绘频率,因为即使超过了这个频率,用户体验也不会有提升. 因此最平滑动画的最佳循环间隔是1

JavaScript中的该如何[更好的]做动效

在用js写动画的时候,无非使用 setTimeout/setInterval 或者 requestAnimationFrame 来处理动画(在jquery的代码里也是这么干的),本文主要为了记录下两者的区别及使用两者来实现动过程. 以实现一个简单的滚动到顶部为例 setInterval setInterval() 方法重复调用一个函数或执行一个代码段,在每次调用之间具有固定的时间延迟.返回一个intervalID,可用于 cancelInterval 达到结束循环的效果. setTimeout

移动端 触屏滑动条菜单(完善版 转)

移动端 触屏滑动条菜单(完善版) 1 1 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 8

移动端 动画函数 的 封装

移动端 单页有时候 制作只用到简单的css3动画即可,我们简单封装一下,没必要引入zepto框架. 上面图片对应的 js var leftsbox=document.getElementById("leftsbox"); var boxdiv=leftsbox.getElementsByTagName("div"); leftsbox.onclick=function(){ for(var i=0;i<boxdiv.length;i++){ var that=

JS常用函数大全

免疫bodyclick方法 这个是个比较好的方法,一个弹出窗口,要设定在任何其他地方点击这个窗口会自动消失,但点这个窗口内部是没事的.那么就要用到这个方法了. // (对body点击产生效果免疫的部分, 阻止冒泡body事件) // 通过ID屏蔽->@args(event, targetID) function blockClickToBodyById(a,b){return b==$(a.target).prop("id")||$(a.target).parents("

window.requestAnimationFrame() ,做逐帧动画,你值得拥有

window.requestAnimationFrame() 方法告诉浏览器您希望执行动画,并请求浏览器调用指定的函数在下一次重绘之前更新动画.该方法使用一个回调函数作为参数,这个回调函数会在浏览器重绘之前调用. 如果你想做逐帧动画的时候,你应该用这个方法.这就要求你的动画函数执行会先于浏览器重绘动作.通常来说,被调用的频率是每秒60次,但是一般会遵循W3C标准规定的频率.如果是后台标签页面,重绘频率则会大大降低. 基本语法: requestID = window.requestAnimatio

requestAnimationFrame动画方法

一.动画方式 在HTML5/CSS3时代,实现动画的方式有许多种: 你可以用css3的animation和@keyframes: 可以用css3的transition: 还可以用原始的setTimeout().setInterval()达到动画效果,以及jQuery中animate方法: 今天我们要介绍是另一种动画方式:requestAnimationFrame(callback)! 二.基本语法 可以直接调用,也可以通过window来调用,接收一个函数作为回调,返回一个ID值: ID=requ