HTML5探秘:用requestAnimationFrame优化Web动画


Posted in HTML / CSS onJune 03, 2018

requestAnimationFrame是什么?

在浏览器动画程序中,我们通常使用一个定时器来循环每隔几毫秒移动目标物体一次,来让它动起来。如今有一个好消息,浏览器开发商们决定:“嗨,为什么我们不在浏览器里提供这样一个API呢,这样一来我们可以为用户优化他们的动画。”所以,这个requestAnimationFrame()函数就是针对动画效果的API,你可以把它用在DOM上的风格变化或画布动画或WebGL中。

使用requestAnimationFrame有什么好处?

浏览器可以优化并行的动画动作,更合理的重新排列动作序列,并把能够合并的动作放在一个渲染周期内完成,从而呈现出更流畅的动画效果。比如,通过requestAnimationFrame(),JS动画能够和CSS动画/变换或SVG SMIL动画同步发生。另外,如果在一个浏览器标签页里运行一个动画,当这个标签页不可见时,浏览器会暂停它,这会减少CPU,内存的压力,节省电池电量。

requestAnimationFrame的用法

// shim layer with setTimeout fallback
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();


// usage:
// instead of setInterval(render, 16) ....

(function animloop(){
  requestAnimFrame(animloop);
  render();
})();
// place the rAF *before* the render() to assure as close to
// 60fps with the setTimeout fallback.

对requestAnimationFrame更牢靠的封装

Opera浏览器的技术师Erik Möller 把这个函数进行了封装,使得它能更好的兼容各种浏览器。你可以读一读这篇文章,但基本上他的代码就是判断使用4ms还是16ms的延迟,来最佳匹配60fps。下面就是这段代码,你可以使用它,但请注意,这段代码里使用的是标准函数,我给它加上了兼容各种浏览器引擎前缀。

(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'] || 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);
        };
}());

我来看看使用requestAnimationFrame的效果

 requestAnimationFrame API

window.requestAnimationFrame(function(/* time */ time){
  // time ~= +new Date // the unix time
});

 回调函数里的参数可以传入时间。

各种浏览器对requestAnimationFrame的支持情况
谷歌浏览器,火狐浏览器,IE10+都实现了这个函数,即使你的浏览器很古老,上面的对requestAnimationFrame封装也能让这个方法在IE8/9上不出错。

HTML / CSS 相关文章推荐
css3高级选择器使用方法
Dec 02 HTML / CSS
css3让div随鼠标移动而抖动起来
Feb 10 HTML / CSS
CSS3的 fit-content实现水平居中
Sep 07 HTML / CSS
CSS3 分类菜单效果
May 27 HTML / CSS
HTML5拖拽文件到浏览器并实现文件上传下载功能代码
Jun 06 HTML / CSS
HTML5在a标签内放置块级元素示例代码
Aug 23 HTML / CSS
HTML5+lufylegend实现游戏中的卷轴
Feb 29 HTML / CSS
Html5中localStorage存储JSON数据并读取JSON数据的实现方法
Feb 13 HTML / CSS
手机端用rem+scss做适配的详解
Nov 15 HTML / CSS
canvas环形倒计时组件的示例代码
Jun 14 HTML / CSS
html5 datalist 选中option选项后的触发事件
Mar 05 HTML / CSS
CSS+HTML 实现顶部导航栏功能
Aug 30 HTML / CSS
html5触摸事件判断滑动方向的实现
Jun 05 #HTML / CSS
使用Canvas操作像素的方法
Jun 14 #HTML / CSS
Html5移动端获奖无缝滚动动画实现示例
Jun 25 #HTML / CSS
video结合canvas实现视频在线截图功能
Jun 25 #HTML / CSS
详解Canvas事件绑定
Jun 27 #HTML / CSS
Html5剪切板功能的实现代码
Jun 29 #HTML / CSS
HTML5 使用 sessionStorage 进行页面传值的方法
Jul 02 #HTML / CSS
You might like
PHP中设置时区,记录日志文件的实现代码
2013/01/07 PHP
php实现上传图片文件代码
2015/07/19 PHP
如何把php5.3版本升级到php5.4或者php5.5
2015/07/31 PHP
详解Yii2 定制表单输入字段的标签和样式
2017/01/04 PHP
PHP编程计算文件或数组中单词出现频率的方法
2017/05/22 PHP
PHP获取链表中倒数第K个节点的方法
2018/01/18 PHP
动态改变textbox的宽高的js
2006/10/26 Javascript
Javascript开发包大全整理
2006/12/22 Javascript
JavaScript中的变量声明早于赋值分析
2012/03/01 Javascript
浅谈javascript面向对象程序设计
2015/01/21 Javascript
easyui Droppable组件实现放置特效
2015/08/19 Javascript
jQuery获取多种input值的简单实现方法
2016/06/20 Javascript
用JS实现轮播图效果(二)
2016/06/26 Javascript
jQuery实现的兼容性浮动层示例
2016/08/02 Javascript
js判断所有表单项不为空则提交表单的实现方法
2016/09/09 Javascript
Javascript实现图片懒加载插件的方法
2016/10/20 Javascript
微信小程序使用for循环动态渲染页面操作示例
2018/12/25 Javascript
JavaScript创建对象的四种常用模式实例分析
2019/01/11 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
2019/09/20 Javascript
Javascript模块化机制实现原理详解
2020/04/02 Javascript
jQuery HTML获取内容和属性操作实例分析
2020/05/20 jQuery
Python使用sorted排序的方法小结
2017/07/28 Python
Python实现的破解字符串找茬游戏算法示例
2017/09/25 Python
Opencv实现抠图背景图替换功能
2019/05/21 Python
详解用pyecharts Geo实现动态数据热力图城市找不到问题解决
2019/06/26 Python
python获取当前文件路径以及父文件路径的方法
2019/07/10 Python
详解python 降级到3.6终极解决方案
2020/02/06 Python
台湾家适得:Homeget
2019/02/11 全球购物
主键(Primary Key)约束和唯一性(UNIQUE)约束的区别
2013/05/29 面试题
酒店行政人事部经理职务说明书
2014/02/26 职场文书
高一课前三分钟演讲稿
2014/09/13 职场文书
党员对照检查材料思想汇报(党的群众路线)
2014/09/24 职场文书
欢迎词范文
2015/01/27 职场文书
植物园观后感
2015/06/11 职场文书
python关于集合的知识案例详解
2021/05/30 Python
Python开发工具Pycharm的安装以及使用步骤总结
2021/06/24 Python