为何用requestAnimationFrame,深刻精通

深深精通 requestAnimationFrame

2017/06/26 · HTML5 ·
requestAnimationFrame

初稿出处: 一像素   

在Web应用中,完毕动画效果的法门相比较多,Javascript 中可以透过定时器
set提姆eout 来达成,css3 能够拔取 transition 和 animation 来兑现,html5
中的 canvas 也足以已毕。除此之外,html5
还提供一个专门用来请求动画的API,这就是
requestAnimationFrame,顾名思义就是恳请动画帧。 为了深远精通 requestAnimationFrame
背后的法则,大家首先须求明白一下与之休戚相关的多少个概念:

在Web应用中,落成动画效果的办法比较多,Javascript 中得以经过定时器
setTimeout 来完成,css3 能够动用 transition 和 animation 来兑现,html5
中的 canvas 也落到实处,svg也落到实处动画。除此之外,html5
还提供一个专门用于请求动画的API,那就是
requestAnimationFrame,顾名思义就是呼吁动画帧。 为了长远精通requestAnimationFrame
背后的原理,大家率先要求精晓一下与之有关的多少个概念:

性能更好的js动画达成格局——requestAnimationFrame

用js来落到实处动画,大家一般是借助set提姆eout或setInterval那多个函数,css3动画出来后,大家又可以使用css3来兑现动画了,而且品质和流畅度也赢得了很大的提拔。不过css3动画照旧有无数局限性,比如不是享有属性都能加入动画、动画缓动效果太少、不能完全控制动画进程等等。所以部分时候我们如故只能够动用set提姆eout或setInterval的点子来贯彻动画,可是set提姆eout和setInterval有着深重的属性难题,固然某些现代浏览器对那两函个数进行了部分优化,但要么不可以跟css3的动画品质并重。这些时候,就该requestAnimationFrame出马了。

 

requestAnimationFrame
是特意为完结高质量的帧动画而计划的一个API,方今已在多个浏览器得到了支撑,包含IE10+,Firefox,Chrome,Safari,Opera等,在活动装备上,ios6以上版本以及IE
mobile
10之上也协理requestAnimationFrame,唯一相比遗憾的是近年来安卓上的原生浏览器并不辅助requestAnimationFrame,不过对requestAnimationFrame的协理应该是自然了,安卓版本的chrome
16+也是支撑requestAnimationFrame的。

 

requestAnimationFrame 比起 setTimeout、setInterval的优势主要有两点:

 

1、requestAnimationFrame
会把每一帧中的所有DOM操作集中起来,在一遍重绘或回流中就到位,并且重绘或回流的时日距离牢牢追随浏览器的刷新频率,一般的话,这些频率为每秒60帧。

 

2、在隐藏或不可知的因素中,requestAnimationFrame将不会进展重绘或回流,那本来就代表更少的的cpu,gpu和内存使用量。

 

像setTimeout、setInterval一样,requestAnimationFrame是一个大局函数。调用requestAnimationFrame后,它会须要浏览器按照自己的效用举办一遍重绘,它接受一个回调函数作为参数,在将要上马的浏览爱慕绘时,会调用这一个函数,并会给这一个函数传入调用回调函数时的日子作为参数。由于requestAnimationFrame的意义只是四回性的,所以若想达到动画效果,则必须一连不停的调用requestAnimationFrame,似乎大家利用set提姆eout来兑现动画所做的这样。requestAnimationFrame函数会回去一个资源标识符,可以把它看做参数传入cancelAnimationFrame函数来打消requestAnimationFrame的回调。如何,是还是不是也跟set提姆eout的clear提姆eout很相像啊。

 

据此,可以这么说,requestAnimationFrame就是一个性质优化版、专为动画量身构建的set提姆eout,分歧的是requestAnimationFrame不是友好指定回调函数运行的岁月,而是随着浏览器内建的刷新频率来进行回调,那当然就能达到浏览器所能落成动画的一流效果了。

 

时下,种种协助requestAnimationFrame的浏览器有些依然自己的私房完结,所以必须加前缀,对于不帮助requestAnimationFrame的浏览器,我们只好利用set提姆eout,因为两岸的利用办法大多相同,所以那两者的卓殊并简单。对于援救requestAnimationFrame的浏览器,我们应用requestAnimationFrame,而不支持的大家优雅降级使用传统的set提姆eout。把它们封装一下,就能收获一个统一包容各大浏览器的API了。

 

代码可以到此处来查阅:

 

复制代码

var lastTime = 0;

var prefixes = ‘webkit moz ms o’.split(‘ ‘); //各浏览器前缀

 

var requestAnimationFrame = window.requestAnimationFrame;

var cancelAnimationFrame = window.cancelAnimationFrame;

 

var prefix;

//通过遍历各浏览器前缀,来获取requestAnimationFrame和cancelAnimationFrame在当前浏览器的贯彻方式

for( var i = 0; i < prefixes.length; i++ ) {

    if ( requestAnimationFrame && cancelAnimationFrame ) {

      break;

    }

    prefix = prefixes[i];

    requestAnimationFrame = requestAnimationFrame || window[ prefix +
‘RequestAnimationFrame’ ];

    cancelAnimationFrame  = cancelAnimationFrame  || window[ prefix +
‘CancelAnimationFrame’ ] || window[ prefix +
‘CancelRequestAnimationFrame’ ];

}

 

//即便当前浏览器不协理requestAnimationFrame和cancelAnimationFrame,则会退到set提姆eout

if ( !requestAnimationFrame || !cancelAnimationFrame ) {

    requestAnimationFrame = function( callback, element ) {

      var currTime = new Date().getTime();

      //为了使set提姆teout的尽心的类似每秒60帧的功效

      var timeToCall = Math.max( 0, 16 – ( currTime – lastTime ) ); 

      var id = window.setTimeout( function() {

为何用requestAnimationFrame,深刻精通。        callback( currTime + timeToCall );

      }, timeToCall );

      lastTime = currTime + timeToCall;

      return id;

    };

    

    cancelAnimationFrame = function( id ) {

      window.clearTimeout( id );

    };

}

 

//获得包容各浏览器的API

window.requestAnimationFrame = requestAnimationFrame; 

window.cancelAnimationFrame = cancelAnimationFrame;

复制代码

那规范大家就能在具有浏览器上接纳requestAnimationFrame和cancelAnimationFrame了。

 

下边举个不难的例子来表明怎么利用requestAnimationFrame举行动画,下边的代码会将id为demo的div以动画的格局向右移动到300px

 

复制代码

<div id=”demo” style=”position:absolute; width:100px; height:100px;
background:#ccc; left:0; top:0;”></div>

 

<script>

var demo = document.getElementById(‘demo’);

function rander(){

    demo.style.left = parseInt(demo.style.left) + 1 + ‘px’;
//每一帧向右移动1px

}

requestAnimationFrame(function(){

    rander();

    //当超过300px后才平息

    if(parseInt(demo.style.left)<=300)
requestAnimationFrame(arguments.callee);

});

</script>

用js来完毕动画,大家一般是凭借setTimeout或setInterval这八个函数,css3动画出来后,我们又可…

什么是requestAnimationFrame?
window.requestAnimationFrame()格局告诉浏览器您愿意执行动画,并请求浏览器调用指定的函数在下两次重绘以前更新动画。该措施应用一个回调函数作为参数,这一个回调函数会在浏览器重绘此前调用。。】

1、屏幕刷新频率

即图像在显示器上立异的速度,也即显示器上的图像每分钟出现的次数,它的单位是赫兹(Hz)。
对于一般台式机电脑,这么些功用几乎是60Hz,
可以在桌面上右键->屏幕分辨率->高级设置->监视器 中查阅和安装。这些值的设定受显示器分辨率、屏幕尺寸和显卡的震慑,原则上设置成让眼睛瞧着清爽的值都行。

市面上常见的显示器有三种,即CRTLCD
CRT就是价值观屏幕,LCD就是大家常说的液晶显示屏。

CRT是一种采纳阴极射线管的显示屏,屏幕上的图形图像是由一个个因电子束击打而发光的荧光点组成,由于显像管内荧光粉受到电子束击打后发光的时光很短,所以电子束必须不断击打荧光粉使其持续发光。电子束每秒击打荧光粉的次数就是屏幕刷新频率。

而对此LCD来说,则不存在刷新频率的题材,它根本就不必要刷新。因为LCD中各样像素都在频频不断地发光,直到不发光的电压改变并被送到控制器中,所以LCD不会有电子束击打荧光粉而滋生的闪耀现象。

因此,当你对着电脑屏幕什么也不做的景况下,屏幕也会以每秒60次的频率正在不停的更新显示屏上的图像。为啥您感觉不到那几个变化?
那是因为人的肉眼有视觉停留效应,即前一副画面留在大脑的回忆还没消逝,紧接着后一副画面就跟上来了,那当中只间隔了16.7ms(1000/60≈16.7),
所以会让您误以为屏幕上的图像是静止不动的。而屏幕给你的那种感觉是对的,试想一下,固然刷新频率变成1次/秒,显示屏上的图像就会并发严重的闪耀,那样就很不难滋生眼睛疲劳、酸痛和头晕等症状。

1. 显示器刷新频率

即图像在显示屏上更新的速度,也即显示器上的图像每秒钟出现的次数,它的单位是赫兹(Hz)。
对于一般笔记本电脑,这么些效能大约是60Hz

市面上常见的屏幕有两种,即CRT和LCD,
CRT就是价值观屏幕,LCD就是大家常说的液晶显示屏。

CRT是一种接纳阴极射线管的显示屏,屏幕上的图形图像是由一个个因电子束击打而发光的荧光点组成,由于显像管内荧光粉受到电子束击打后发光的小时很短,所以电子束必须不断击打荧光粉使其相连发光。电子束每秒击打荧光粉的次数就是屏幕刷新频率。

而对此LCD来说,则不设有刷新频率的题材,它根本就不需求刷新。因为LCD中每个像素都在不停不断地发光,直到不发光的电压改变并被送到控制器中,所以LCD不会有电子束击打荧光粉而滋生的闪耀现象。

从而,当你对着电脑显示器什么也不做的情况下,显示屏也会以每秒60次的功用正在持续的立异显示器上的图像。为何您感觉到不到这几个变化?
这是因为人的眼睛有视觉停留效应,即前一副画面留在大脑的回忆还没消失,紧接着后一副画面就跟上来了,那当中只间隔了16.7ms(1000/60≈16.7),
所以会让你误以为显示器上的图像是静止不动的。而显示器给你的那种感觉是对的,试想一下,假设刷新频率变成1次/秒,显示器上的图像就会产出严重的闪亮,那样就很简单滋生眼睛疲劳、酸痛和头晕等病症。


2、动画原理

据悉地点的规律大家驾驭,你眼前所见到图像正在以每秒60次的效用刷新,由于刷新频率很高,因而你觉得不到它在刷新。而动画本质就是要令人随即到图像被刷新而滋生变化的视觉效果,这一个变化要以连贯的、平滑的方法开展过渡。 那怎么才能一呵而就那种效益啊?

刷新频率为60Hz的显示屏每16.7ms刷新三遍,大家在屏幕每一遍刷新前,将图像的地点向左移动一个像素,即1px。这样一来,显示器每趟刷出来的图像地点都比前一个要差1px,由此你会看到图像在活动;由于我们人眼的视觉停留效应,当前地点的图像停留在大脑的影像还没熄灭,紧接着图像又被移到了下一个职责,因而你才会见到图像在通顺的位移,那就是视觉效果上形成的卡通。

2. 卡通原理

依照下面的规律大家了解,你后面所观看图像正在以每秒60次的频率刷新,由于刷新频率很高,因而你倍感不到它在刷新。而动画片本质就是要令人当即到图像被刷新而滋生变化的视觉效果,这么些变化要以连贯的、平滑的办法举办对接。
那什么样才能做到这种作用呢?

刷新频率为60Hz的显示屏每16.7ms刷新四次,我们在屏幕每一遍刷新前,将图像的地方向左移动一个像素,即1px。这样一来,显示器每一次刷出来的图像地点都比前一个要差1px,由此你见面到图像在运动;由于大家人眼的视觉停留效应,当前任务的图像停留在大脑的记念还没熄灭,紧接着图像又被移到了下一个职务,由此你才会看出图像在通畅的移动,那就是视觉效果上形成的动画片。

优势
貌似浏览器的渲染刷新频率是 60 fps,所以在网页当中,帧率如若达到 50-60
fps 的卡通片将会一定流利,令人感觉到舒服。

3、setTimeout

接头了地点的概念之后,大家简单发现,set提姆eout
其实就是透过安装一个间隔时间来持续的变动图像的义务,从而落成动画效果的。但大家会发觉,利用seTimeout已毕的卡通在一些低端机上会油但是生卡顿、抖动的光景。
那种景观的发出有五个原因:

  • set提姆eout的实施时间并不是规定的。在Javascript中, set提姆eout
    义务被放进了异步队列中,唯有当主线程上的职分履行完之后,才会去检查该队列里的义务是不是需求初叶执行,由此 set提姆eout
    的实际上履行时间一般要比其设定的年月晚一些。
  • 刷新频率受显示器分辨率显示屏尺寸的震慑,因而不一致装备的显示器刷新频率可能会不一致,而
    set提姆eout只可以设置一个恒定的年华间隔,这一个日子不肯定和显示器的基础代谢时间一致。

上述三种意况都会促成set提姆eout的进行步调和屏幕的刷新步调不同,从而挑起丢帧场地。
那为啥步调不均等就会唤起丢帧呢?

率先要清楚,setTimeout的实施只是在内存中对图像属性进行更改,那个转变必要求等到显示屏下次刷新时才会被更新到显示屏上。假诺双方的步调不雷同,就可能会促成中间某一帧的操作被领先过去,而直白更新下一帧的图像。若是显示器每隔16.7ms刷新三次,而set提姆eout每隔10ms设置图像向左移动1px,
就会油然则生如下绘制进程:

  • 第0ms: 显示屏未刷新,等待中,setTimeout也未履行,等待中;
  • 第10ms: 显示屏未刷新,等待中,set提姆eout早先推行并设置图像属性left=1px;
  • 第16.7ms: 显示屏先导刷新,显示器上的图像向左移动了1px, set提姆eout
    未执行,继续守候中;
  • 第20ms: 屏幕未刷新,等待中,set提姆eout初叶施行并设置left=2px;
  • 第30ms: 屏幕未刷新,等待中,set提姆eout开头推行并设置left=3px;
  • 第33.4ms:屏幕发轫刷新,显示屏上的图像向左移动了3px
    set提姆eout未举办,继续伺机中;

从上面的绘图进程中得以看来,屏幕没有立异left=2px的那一帧镜头,图像直接从1px的职位跳到了3px的的地方,那就是丢帧现象,那种场地就会挑起动画卡顿。

3. setTimeout

知情了地方的概念之后,我们简单窥见,set提姆eout
其实就是经过设置一个间隔时间来持续的变更图像的岗位,从而达到动画效果的。但大家会意识,利用se提姆eout达成的动画片在少数低端机上会并发卡顿、抖动的现象。
那种情景的爆发有三个原因:

set提姆eout的执行时间并不是规定的。在Javascript中, set提姆eout
职分被放进了异步队列中,唯有当主线程上的职务履行完之后,才会去检查该队列里的义务是不是须求发轫举办,由此set提姆eout 的其实履行时间一般要比其设定的时日晚一些。

刷新频率受显示器分辨率和显示器尺寸的熏陶,因而差异装备的显示屏刷新频率可能会分化,而
set提姆eout只可以设置一个一定的小时间隔,这几个日子不自然和屏幕的基础代谢时间一模一样。

上述三种情景都会造成setTimeout的履行步调和显示器的基础代谢步调分裂,从而挑起丢帧现象。
这为何步调不雷同就会挑起丢帧呢?

首先要领会,set提姆eout的实施只是在内存中对图像属性举办转移,这一个变化必必要等到屏幕下次刷新时才会被更新到显示屏上。倘使两岸的步骤不等同,就可能会招致中间某一帧的操作被超过过去,而直接更新下一帧的图像。倘使显示屏每隔16.7ms刷新三回,而set提姆eout每隔10ms设置图像向左移动1px,
就会油可是生如下绘制进度:

第0ms: 显示屏未刷新,等待中,setTimeout也未履行,等待中;

第10ms: 显示屏未刷新,等待中,set提姆eout开端执行并安装图像属性left=1px;

第16.7ms: 显示器开端刷新,显示器上的图像向左移动了1px, set提姆eout
未履行,继续伺机中;

第20ms: 显示屏未刷新,等待中,set提姆eout伊始实施并设置left=2px;

第30ms: 显示器未刷新,等待中,set提姆eout起先履行并设置left=3px;

第33.4ms:显示屏开首刷新,显示屏上的图像向左移动了3px,
set提姆eout未履行,继续伺机中;

从地点的绘图进程中得以看来,显示屏没有更新left=2px的那一帧画面,图像直接从1px的职责跳到了3px的的职位,这就是丢帧现象,那种气象就会唤起动画卡顿。

设若利用基于 javaScript 的卡通片,尽量接纳 requestAnimationFrame. 防止使用
set提姆eout, setInterval.

4、requestAnimationFrame

与set提姆eout相比较,requestAnimationFrame最大的优势是由系统来控制回调函数的施行时机。具体一点讲,如果显示屏刷新率是60Hz,那么回调函数就每16.7ms被实践一回,假诺刷新率是75Hz,那么这几个小时间隔就改为了1000/75=13.3ms,换句话说就是,requestAnimationFrame的步履跟着系统的刷新步伐走。它能担保回调函数在屏幕每便的刷新间隔中只被实施三回,那样就不会唤起丢帧现象,也不会招致动画面世卡顿的难点。

那几个API的调用很简短,如下所示:

var progress = 0; //回调函数 function render() { progress += 1;
//修改图像的地点 if (progress < 100) { //在动画没有截止前,递归渲染
window.requestAnimationFrame(render); } } //第一帧渲染
window.requestAnimationFrame(render);

1
2
3
4
5
6
7
8
9
10
11
12
13
var progress = 0;
//回调函数
function render() {
    progress += 1; //修改图像的位置
    if (progress < 100) {
           //在动画没有结束前,递归渲染
           window.requestAnimationFrame(render);
    }
}
//第一帧渲染
window.requestAnimationFrame(render);

除却,requestAnimationFrame还有以下五个优势:

  • CPU节能:使用set提姆eout达成的卡通,当页面被埋伏或最小化时,set提姆eout
    如故在后台执行动画义务,由于此时页面处于不可知或不可用状态,刷新动画是没有意义的,完全是荒废CPU资源。而requestAnimationFrame则统统分化,当页面处理未激活的事态下,该页面的显示器刷新职务也会被系统中断,因而跟着系统步伐走的requestAnimationFrame也会终止渲染,当页面被激活时,动画就从上次滞留的地方继续执行,有效节约了CPU费用。

  • 函数节流:在高频率事件(resize,scroll等)中,为了避防在一个刷新间隔内发出频仍函数执行,使用requestAnimationFrame可确保每个刷新间隔内,函数只被实践五次,那样既能有限援助流畅性,也能更好的节约函数执行的开销。一个刷新间隔内函数执行很多次时从没意思的,因为显示屏每16.7ms刷新一回,数十次制图并不会在显示屏上反映出来。

澳门葡京 ,4. requestAnimationFrame

setTimeout相比,requestAnimationFrame最大的优势是由系统来支配回调函数的进行时机。具体一点讲,倘诺屏幕刷新率是60Hz,那么回调函数就每16.7ms被实践三回,要是刷新率是75Hz,那么那一个时间间隔就变成了1000/75=13.3ms,换句话说就是,requestAnimationFrame的脚步跟着系统的刷新步伐走。它能有限帮助回调函数在屏幕每三遍的基础代谢间隔中只被实施一次,那样就不会引起丢帧现象,也不会促成动画面世卡顿的题材。

以此API的调用很简短,如下所示:

var progress = 0;
//回调函数
function render() {
    progress += 1; //修改图像的位置
    if (progress < 100) {
           //在动画没有结束前,递归渲染
           window.requestAnimationFrame(render);
    }
}
//第一帧渲染
window.requestAnimationFrame(render);

除去,requestAnimationFrame还有以下多个优势:

  • CPU节能:使用set提姆eout已毕的卡通片,当页面被埋伏或最小化时,set提姆eout
    照旧在后台执行动画任务,由于此时页面处于不可见或不可用状态,刷新动画是从未意思的,完全是荒废CPU资源。而requestAnimationFrame则完全不一致,当页面处理未激活的情状下,该页面的屏幕刷新职务也会被系统中断,由此跟着系统步伐走的requestAnimationFrame也会告一段落渲染,当页面被激活时,动画就从上次滞留的地方继续执行,有效节约了CPU开销。
  • 函数节流:在高频率事件(resize,scroll等)中,为了预防在一个刷新间隔内暴发频仍函数执行,使用requestAnimationFrame可确保每个刷新间隔内,函数只被执行四回,那样既能保障流畅性,也能更好的节约函数执行的付出。一个刷新间隔内函数执行数次风尚未意义的,因为显示屏每16.7ms刷新一遍,多次绘制并不会在显示屏上反映出来。

幸免通过类似 jQuery animate()-style 改变每帧的体制,使用 CSS
注解动画会获得更好的浏览器优化。

5、优雅降级

鉴于requestAnimationFrame如今还留存包容性难题,而且差别的浏览器还亟需带区其余前缀。因而必要经过优雅降级的法子对requestAnimationFrame举办包装,优先利用高级特性,然后再按照差别浏览器的状态进行回退,直止只能利用set提姆eout的意况。下边的代码就是有人在github上提供的polyfill,详细介绍请参见github代码 requestAnimationFrame

if (!Date.now) Date.now = function() { return new Date().getTime(); };
(function() { ‘use strict’; var vendors = [‘webkit’, ‘moz’]; for (var
i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) {
var vp = vendors[i]; window.requestAnimationFrame =
window[vp+’RequestAnimationFrame’]; window.cancelAnimationFrame =
(window[vp+’CancelAnimationFrame’] ||
window[vp+’CancelRequestAnimationFrame’]); } if (/iP(ad|hone|od).*OS
6/.test(window.navigator.userAgent) // iOS6 is buggy ||
!window.requestAnimationFrame || !window.cancelAnimationFrame) { var
lastTime = 0; window.requestAnimationFrame = function(callback) { var
now = Date.now(); var nextTime = Math.max(lastTime + 16, now); return
setTimeout(function() { callback(lastTime = nextTime); }, nextTime –
now); }; window.cancelAnimationFrame = clearTimeout; } }());

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
if (!Date.now)
    Date.now = function() { return new Date().getTime(); };
(function() {
    ‘use strict’;
    
    var vendors = [‘webkit’, ‘moz’];
    for (var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) {
        var vp = vendors[i];
        window.requestAnimationFrame = window[vp+’RequestAnimationFrame’];
        window.cancelAnimationFrame = (window[vp+’CancelAnimationFrame’]
                                   || window[vp+’CancelRequestAnimationFrame’]);
    }
    if (/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent) // iOS6 is buggy
        || !window.requestAnimationFrame || !window.cancelAnimationFrame) {
        var lastTime = 0;
        window.requestAnimationFrame = function(callback) {
            var now = Date.now();
            var nextTime = Math.max(lastTime + 16, now);
            return setTimeout(function() { callback(lastTime = nextTime); },
                              nextTime – now);
        };
        window.cancelAnimationFrame = clearTimeout;
    }
}());

1 赞 2 收藏
评论

澳门葡京 1

5.优雅贬职

是因为requestAnimationFrame目前还留存包容性难点,而且分化的浏览器还亟需带分裂的前缀。因此须求经过优雅降级的主意对requestAnimationFrame进行包装,优先利用高级特性,然后再根据不相同浏览器的状态展开回退,直止只好利用set提姆eout的情状。上面的代码就是有人在github上提供的polyfill,详细介绍请参见github代码
requestAnimationFrame(https://github.com/darius/requestAnimationFrame)

if (!Date.now)
    Date.now = function() { return new Date().getTime(); };
(function() {
    'use strict';
    var vendors = ['webkit', 'moz'];
    for (var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) {
        var vp = vendors[i];
        window.requestAnimationFrame = window[vp+'RequestAnimationFrame'];
        window.cancelAnimationFrame = (window[vp+'CancelAnimationFrame']
                                   || window[vp+'CancelRequestAnimationFrame']);
    }
    if (/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent) // iOS6 is buggy
        || !window.requestAnimationFrame || !window.cancelAnimationFrame) {
        var lastTime = 0;
        window.requestAnimationFrame = function(callback) {
            var now = Date.now();
            var nextTime = Math.max(lastTime + 16, now);
            return setTimeout(function() { callback(lastTime = nextTime); },
                              nextTime - now);
        };
        window.cancelAnimationFrame = clearTimeout;
    }
}());

转至:
http://www.cnblogs.com/onepixel/p/7078617.html

利用 translate 取代 absolute 定位就会博得更好的 fps,动画会更顺滑。

浏览器可以优化并行的卡通动作,更客观的重新排列动作系列,并把可以联合的动作放在一个渲染周期内成功,从而突显出更通畅的动画片效果。比如,通过requestAnimationFrame(),JS动画可以和CSS动画/变换或SVG
SMIL动画同步发生。其余,假使在一个浏览器标签页里运行一个动画片,当那么些标签页不可知时,浏览器会暂停它,那会减小CPU,内存的压力,节省电池电量。


匹配处理

/* requestAnimationFrame.js

* by zhangxinxu 2013-09-30

*/

(function() {

var lastTime = 0;

var vendors = [‘webkit’, ‘moz’];

for(var x = 0; x < vendors.length && !window.requestAnimationFrame;
++x) {

window.requestAnimationFrame = window[vendors[x] +
‘RequestAnimationFrame’];

window.cancelAnimationFrame = window[vendors[x] +
‘CancelAnimationFrame’] ||    // name has changed in Webkit

window[vendors[x] + ‘CancelRequestAnimationFrame’];

}

if (!window.requestAnimationFrame) {

window.requestAnimationFrame = function(callback, element) {

var currTime = new Date().getTime();

var timeToCall = Math.max(0, 16.7 – (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);

};

}

}());


相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website