html5+shim脚本,HTML5探秘:用requestAnimationFrame优化Web动画
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上不出错。
html5+shim脚本,HTML5探秘:用requestAnimationFrame优化Web动画相关推荐
- requestAnimationFrame 优化Web动画
就终极目的来说,requestAnimationFrame就是setTimeout.既然有了setTimeout,那还要requestAnimationFrame来干嘛.setTimeout会存在过度 ...
- 使用jQuery开发一个基于HTML5的漂亮图片拖拽上传web应用
昨天我们介绍了一款HTML5文件上传的jQuery插件:jQuery HTML5 uploader,今天我们将开发一个简单的叫upload center的图片上传程序,允许用户使用拖拽方式来上传电脑上 ...
- html语义化的理解是什么,html5语义化,html5的语义化的理解
家里有个熊孩子,经常会有一些意想不到的事情发生:回家的时候,他会笑呵呵冲过来,大声喊着臭爸爸;你让他把鞋穿上,他会提起鞋子往楼下扔在小孩的世界里,他虽然会说话,但不一定明白其中的意思,不能正确表达;同 ...
- html5是什么意思,HTML5是什么 HTML5是什么意思 HTML5简介
HTML5是什么 HTML5是什么意思 HTML5简介 发布时间:2012-10-26 15:04:00 作者:佚名 我要评论 随着Windows8正式版发布的脚步近在咫尺,近来关于Win8. ...
- 简单的html5,简单的HTML5初步入门教程
HTML5 代表未来:W3C ( World Wide Web Consortium, 万维网联盟) 已经放弃 XHTML,从而使 HTML5 成为正式标准并得到认可. HTML5 是下一代的 HTM ...
- php识别html5,CSS_在IE6/7/8下识别html5标签(让老式浏览器识别html5),识别html5标签: html5添加了许 - phpStudy...
在IE6/7/8下识别html5标签(让老式浏览器识别html5) 识别html5标签: html5添加了许多语义化的标签,比如,,什么的,当时看到这些标签的时候心想html5估计很多老式IE浏览器都 ...
- html5网页设计教程电子书,HTML5教程(使用HTML5设计网络富客户端应用)
该作品是PDF文件格式请下载 福昕PDF阅读器 新的强大的多媒体和交互功能的HTML5,<HTML5: Designing Rich Internet Applications >包括风格 ...
- html5大全,常用html5标签大全 - 小俊学习网
作为一名网页制作人员或者seo优化人员,不可不知的html5标签.万维网的核心语言.标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改.2014年10月29日,html5标准规范制 ...
- html5 svg特性,HTML5新特性——HTML 5 Canvas vs. SVG
Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不同的. SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中的每个 ...
最新文章
- C++_pointer-like classes,function-like classes
- 使用AppleScript播放指定时间的电影片段
- 【整理】MySQL 之 autocommit
- 听说你趁我不在家,欺负我老婆?
- mockito 单元测试_使用FizzBu​​zz和Mockito进行单元测试
- 前端学习(2520):环境搭建
- java 场景处理,将黄瓜场景示例作为一个场景处理
- Linux Shell脚本专栏_自动发布Java项目(tomcat)_10
- ci/cd heroku_在GitLab上设置CI / CD以在Heroku上部署Python Flask应用程序
- Vue+elementUI时间选择器的应用
- antd使用阿里巴巴矢量图标
- 计算机无法删除ie,ie删不掉的原因及解决方法【图解】
- 淘宝以图搜图接口,图片搜索商品接入指南
- android 监控id代码,茗伊插件 剑三技能监控代码
- HR面/综合面系列:反问环节
- 基于jsp+mysql+Spring+mybatis的ssm酒店管理系统
- (R68s,R66s)OpenWRT设置ipv6网络(以光猫拨号场景为例)
- Python求多元函数的极小值
- 百万级 QPS 业务新宠,金山办公携手 Apache APISIX 打造网关实践新体验
- 数理统计SPSS软件实验报告三--参数估计2
热门文章
- cnpm不是内部或外部命令 cnpm: command not found 解决方案 cnpm
- 安装redis,执行make test时遇到You need tcl 8.5 or newer in order to run the Redis test
- npm如何设置淘宝镜像
- 多方法调用 一个出错 集体回滚_一个@Transaction哪里来这么多坑?
- 天线巴伦制作和原理_10米段的春天 | 用自制环型天线+改装SDR接收器27MHz采访实录...
- java配置jndi连接数_JavaWeb:Tomcat下配置数据源(JNDI)连接数据库 | 学步园
- C语言格式控制符/占位符 - C语言零基础入门教程
- BugkuCTF-MISC题好多数值
- 【C语言基础】gdb调试工具的使用
- linux获取文件的md5,linux shell 获取文件md5的命令linux操作系统 -电脑资料