一、动画方式

在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动画方法的更多相关文章

  1. requestAnimationFrame 动画

    requestAnimationFrame : 调用这个方法,就是告诉浏览器要执行动画了,从而浏览器自动计算动画时间间隔,从而在恰当的时候刷新UI, 动画更加平滑. 他的用法和setTimeout() ...

  2. 移动端 transition动画函数的封装(仿Zepto)以及 requestAnimationFrame动画函数封装(仿jQuery)

    移动端 css3 transition 动画 ,requestAnimationFrame 动画  对于性能的要求,h5优先考虑: 移动端 单页有时候 制作只用到简单的css3动画即可,我们封装一下, ...

  3. jQuery中的动画方法

    对角线动画 hide():显示 可以写两个参数——第一个参数 数字类型:毫秒 字符串类型: slow:慢 600ms  normal:比slow快   比fast慢   400ms  fast:快   ...

  4. JQuery基本选择器和基本动画方法总结

    刚开始接触JQuery是在大三的时候,那时候先学的Javascript,然后跳跃到JQuery,就一个字,爽.但因为之前用的不是太多,所以很多都忘了,直接导致的后果就是之前在一家公司面试,面试官问我要 ...

  5. Window.requestAnimationFrame()动画更新

    概述 Window.requestAnimationFrame()方法告诉浏览器你希望执行动画,并且再下一次重绘之前要求浏览器调用一个特定的函数去更新动画.该方法把一个回调函数作为参数,该回调函数会在 ...

  6. jQuery学习-css、class操作、动画方法的运用、jQ操作Dom节点

    css操作(设置单个/多个样式.获取样式) //修改单个属性:括号之中直接是需要修改的样式名,值 css(name,value) //例:$("#one").css("b ...

  7. 自定义动画方法animate

    animate的使用方法:animate(params,speed,callback); 例子:animate({ right: "-=600px",height:"+= ...

  8. jquery的基本动画方法

    1 在使用$.extent()的时候,我们一般不放function类型,如果放的话,提前测试下. ?2 Function类型是一种基本类型还是引用类型呢. 3 $('<div>') 指创建 ...

  9. Jquery动画方法 jquery.animate()

    目前在学习Oracle数据库,由于刚接触,学校让练习练习HTML内容,就想起了老师以前提起过的animate方法 animate是jquery的一个方法,这个方法主要功能是能实现比较平滑的动态效果,所 ...

随机推荐

  1. Log4j MDC Tomcat下报异常org.apache.log4j.helpers.ThreadLocalMap

    严重: The web application [/qdgswx] created a ThreadLocal with key of type [org.apache.log4j.helpers.T ...

  2. Configuring HTTP and HTTPS

    Configuring HTTP and HTTPS .NET Framework (current version)   Other Versions   WCF services and clie ...

  3. Struts2配置RESULT中TYPE的参数说明

    chain           用来处理Action链,被跳转的action中仍能获取上个页面的值,如request信息.           com.opensymphony.xwork2.Acti ...

  4. CSS中display:block的使用介绍

    在CSS的规定中,每个页面元素都有一个display的属性,用于确定这个元素的类型是行内元素,还是块级元素: (1)行内元素:元素在一行内水平排列,依附于其他块级元素存在,因此,对行内元素设置高度.宽 ...

  5. 【hihoCoder第十四周】无间道之并查集

    就是基础的并查集.0代表合并操作,1代表查询操作.一开始以为会卡路径压缩,忐忑的交了一版裸并查集,结果AC了.数据还是很水的. 以后坚持做hiho,当额外的练习啦~ #include <bits ...

  6. Java集合的实现细节—Set集合和Map集合

    Set:代表无序.不可重复的集合 Map:代表key-value对集合,也称为关联数组 从表面上看,Set和Map相似性很少,但实际上可以说Map集合时Set集合的扩展. 1.Set集合和Map集合的 ...

  7. hdu 5422 Rikka with Graph(简单题)

    Problem Description As we know, Rikka is poor at math. Yuta is worrying about this situation, so he ...

  8. 前端开发利器—FIDDLER 转

    http://www.cnblogs.com/yuzhongwusan/archive/2012/07/20/2601306.html 前端开发利器—FIDDLER 1.Fiddler相对其他调试工具 ...

  9. const与define的异同

    1. DEFINE是预处理指令,是简单的文字替换:而const是关键字,用于变量声明的修饰. 2. DEFINE替换的结果可以是数值.表达式.字符串.甚至是一个程序:而const只能限定变量为不可修改 ...

  10. RAC 的一些概念性和原理性的知识(转)

    一 集群环境下的一些特殊问题 1.1 并发控制 在集群环境中, 关键数据通常是共享存放的,比如放在共享磁盘上. 而各个节点的对数据有相同的访问权限, 这时就必须有某种机制能够控制节点对数据的访问. O ...