干什么用requestAnimationFrame,品质更好的js动画落成形式

深远精晓 requestAnimationFrame

2017/06/26 · HTML5 ·
requestAnimationFrame

原文出处: 干什么用requestAnimationFrame,品质更好的js动画落成形式。一像素   

在Web应用中,完结动画效果的不二法门比较多,Javascript 中得以经过定时器
set提姆eout 来促成,css3 可以利用 transition 和 animation 来兑现,html5
中的 canvas 也落到实处。除此之外,html5
还提供一个专门用来请求动画的API,这就是
requestAnimationFrame,顾名思义就是呼吁动画帧。 为了深远领悟 requestAnimationFrame
背后的规律,我们先是要求通晓一下与之有关的多少个概念:

在Web应用中,完结动画效果的不二法门比较多,Javascript 中得以经过定时器
set提姆eout 来落成,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 比起 set提姆eout、setInterval的优势主要有两点:

 

1、requestAnimationFrame
会把每一帧中的所有DOM操作集中起来,在一次重绘或回流中就做到,并且重绘或回流的光阴距离牢牢追随浏览器的刷新频率,一般的话,那几个频率为每秒60帧。

 

2、在隐身或不可知的元素中,requestAnimationFrame将不会展开重绘或回流,这当然就表示更少的的cpu,gpu和内存使用量。

 

像set提姆eout、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() {

        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来促成动画,大家一般是借助set提姆eout或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
其实就是通过安装一个间隔时间来持续的转移图像的岗位,从而达成动画效果的。但我们会意识,利用se提姆eout完成的卡通在好几低端机上会并发卡顿、抖动的光景。
那种情景的暴发有七个原因:

  • set提姆eout的举行时间并不是规定的。在Javascript中, setTimeout
    任务被放进了异步队列中,唯有当主线程上的职分履行完之后,才会去反省该队列里的天职是还是不是须求早先实施,由此 set提姆eout
    的其实履行时间一般要比其设定的小时晚一些。
  • 刷新频率受显示器分辨率显示屏尺寸的熏陶,因而差距装备的显示器刷新频率可能会分化,而
    set提姆eout只好设置一个固定的时间间隔,这一个小时不肯定和屏幕的基础代谢时间同一。

以上三种境况都会招致set提姆eout的进行步调和显示器的基础代谢步调不一样,从而挑起丢帧场馆。
那为啥步调分化等就会挑起丢帧呢?

先是要精通,set提姆eout的施行只是在内存中对图像属性举行改动,这些转变必需要等到屏幕下次刷新时才会被更新到屏幕上。若是双方的步骤不一致,就可能会招致中间某一帧的操作被超越过去,而直接更新下一帧的图像。借使显示器每隔16.7ms刷新一回,而set提姆eout每隔10ms设置图像向左移动1px,
就会油可是生如下绘制进程:

  • 第0ms: 显示器未刷新,等待中,set提姆eout也未进行,等待中;
  • 第10ms: 显示器未刷新,等待中,setTimeout开头履行并设置图像属性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只好设置一个固定的岁月距离,那些时间不自然和显示器的刷新时间同一。

以上二种状态都会促成set提姆eout的举行步调和显示器的刷新步调分裂,从而引起丢帧现象。
那为何步调不一致等就会唤起丢帧呢?

先是要通晓,set提姆eout的执行只是在内存中对图像属性举办改动,那些变化必需求等到显示器下次刷新时才会被更新到显示器上。假若两者的步骤分歧,就可能会招致中间某一帧的操作被领先过去,而直接更新下一帧的图像。假如屏幕每隔16.7ms刷新一遍,而set提姆eout每隔10ms设置图像向左移动1px,
就会冒出如下绘制进度:

第0ms: 屏幕未刷新,等待中,set提姆eout也未执行,等待中;

第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节能:使用setTimeout完结的卡通,当页面被隐形或最小化时,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);

};

}

}());


网站地图xml地图