requestAnimationFrame动画方法
一、动画方式
在HTML5/CSS3时代,实现动画的方式有许多种:
你可以用css3的animation和@keyframes;
可以用css3的transition;
还可以用原始的setTimeout()、setInterval()达到动画效果,以及jQuery中animate方法;
今天我们要介绍是另一种动画方式:requestAnimationFrame(callback)!
二、基本语法
可以直接调用,也可以通过window来调用,接收一个函数作为回调,返回一个ID值:
ID=requestAnimationFrame(callback)//callback为回调函数
requestAnimationFrame的用法和setTimeout()类似都是单回调,其优势在于跟着浏览器的绘制走。相当一部分的浏览器的显示频率是16.7ms,即1s绘制60次。如果间隔时间小于16.7ms动画就会卡顿,而requestAnimationFrame就是在浏览器绘制是调用动画!总结requestAnimationFrame的优势如下:
1.跟着浏览器的绘制走,动画更流畅;
2.页面最小化了,或者被Tab切换关灯了,页面绘制全部停止,资源高效利用;
3.更省电,尤其是对移动终端。
如果想停止动画调用,方法如下:
cancelAnimationFrame(ID);
三、兼容情况
Android设备压根就不支持嘛!其他设备基本上跟CSS3动画的支持一模一样。
如果需要简单兼容,可这么写:
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();
但是呢,并不是所有设备的绘制时间间隔是1000/60 ms
, 以及上面并木有cancel相关方法,所以,就有下面这份更全面的兼容方法:
(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);
};
}());
然后我们就能像使用setTimeout一样来使用requestAnimationFrame了!
requestAnimationFrame动画方法的更多相关文章
- requestAnimationFrame 动画
requestAnimationFrame : 调用这个方法,就是告诉浏览器要执行动画了,从而浏览器自动计算动画时间间隔,从而在恰当的时候刷新UI, 动画更加平滑. 他的用法和setTimeout() ...
- 移动端 transition动画函数的封装(仿Zepto)以及 requestAnimationFrame动画函数封装(仿jQuery)
移动端 css3 transition 动画 ,requestAnimationFrame 动画 对于性能的要求,h5优先考虑: 移动端 单页有时候 制作只用到简单的css3动画即可,我们封装一下, ...
- jQuery中的动画方法
对角线动画 hide():显示 可以写两个参数——第一个参数 数字类型:毫秒 字符串类型: slow:慢 600ms normal:比slow快 比fast慢 400ms fast:快 ...
- JQuery基本选择器和基本动画方法总结
刚开始接触JQuery是在大三的时候,那时候先学的Javascript,然后跳跃到JQuery,就一个字,爽.但因为之前用的不是太多,所以很多都忘了,直接导致的后果就是之前在一家公司面试,面试官问我要 ...
- Window.requestAnimationFrame()动画更新
概述 Window.requestAnimationFrame()方法告诉浏览器你希望执行动画,并且再下一次重绘之前要求浏览器调用一个特定的函数去更新动画.该方法把一个回调函数作为参数,该回调函数会在 ...
- jQuery学习-css、class操作、动画方法的运用、jQ操作Dom节点
css操作(设置单个/多个样式.获取样式) //修改单个属性:括号之中直接是需要修改的样式名,值 css(name,value) //例:$("#one").css("b ...
- 自定义动画方法animate
animate的使用方法:animate(params,speed,callback); 例子:animate({ right: "-=600px",height:"+= ...
- jquery的基本动画方法
1 在使用$.extent()的时候,我们一般不放function类型,如果放的话,提前测试下. ?2 Function类型是一种基本类型还是引用类型呢. 3 $('<div>') 指创建 ...
- Jquery动画方法 jquery.animate()
目前在学习Oracle数据库,由于刚接触,学校让练习练习HTML内容,就想起了老师以前提起过的animate方法 animate是jquery的一个方法,这个方法主要功能是能实现比较平滑的动态效果,所 ...
随机推荐
- Log4j MDC Tomcat下报异常org.apache.log4j.helpers.ThreadLocalMap
严重: The web application [/qdgswx] created a ThreadLocal with key of type [org.apache.log4j.helpers.T ...
- Configuring HTTP and HTTPS
Configuring HTTP and HTTPS .NET Framework (current version) Other Versions WCF services and clie ...
- Struts2配置RESULT中TYPE的参数说明
chain 用来处理Action链,被跳转的action中仍能获取上个页面的值,如request信息. com.opensymphony.xwork2.Acti ...
- CSS中display:block的使用介绍
在CSS的规定中,每个页面元素都有一个display的属性,用于确定这个元素的类型是行内元素,还是块级元素: (1)行内元素:元素在一行内水平排列,依附于其他块级元素存在,因此,对行内元素设置高度.宽 ...
- 【hihoCoder第十四周】无间道之并查集
就是基础的并查集.0代表合并操作,1代表查询操作.一开始以为会卡路径压缩,忐忑的交了一版裸并查集,结果AC了.数据还是很水的. 以后坚持做hiho,当额外的练习啦~ #include <bits ...
- Java集合的实现细节—Set集合和Map集合
Set:代表无序.不可重复的集合 Map:代表key-value对集合,也称为关联数组 从表面上看,Set和Map相似性很少,但实际上可以说Map集合时Set集合的扩展. 1.Set集合和Map集合的 ...
- hdu 5422 Rikka with Graph(简单题)
Problem Description As we know, Rikka is poor at math. Yuta is worrying about this situation, so he ...
- 前端开发利器—FIDDLER 转
http://www.cnblogs.com/yuzhongwusan/archive/2012/07/20/2601306.html 前端开发利器—FIDDLER 1.Fiddler相对其他调试工具 ...
- const与define的异同
1. DEFINE是预处理指令,是简单的文字替换:而const是关键字,用于变量声明的修饰. 2. DEFINE替换的结果可以是数值.表达式.字符串.甚至是一个程序:而const只能限定变量为不可修改 ...
- RAC 的一些概念性和原理性的知识(转)
一 集群环境下的一些特殊问题 1.1 并发控制 在集群环境中, 关键数据通常是共享存放的,比如放在共享磁盘上. 而各个节点的对数据有相同的访问权限, 这时就必须有某种机制能够控制节点对数据的访问. O ...