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的一个方法,这个方法主要功能是能实现比较平滑的动态效果,所 ...
随机推荐
- Swift--访问级别-备
访问级别: Swift提供了3种不同访问级别,对应的访问修饰符为:public.internal和private.这些访问修饰符可以修饰类.结构体.枚举等面向对象的类型,还可以修饰变量.常量.下标.元 ...
- Bash 使用技巧大补贴
https://linuxtoy.org/archives/the-best-tips-and-tricks-for-bash.html
- MFC消息映射与命令传递
题外话:刚开始学视窗程序设计的时候,我就打印了一本Windows消息详解,里面列举了各种已定义消息的意义和作用,共10多页,在编程的时候翻翻,有时觉得很受用.我发觉很多编程的朋友,虽然每天都面对消息, ...
- Delphi7下实现HTTP的Post操作 转
Delphi7下实现HTTP的Post操作 unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Gra ...
- DateTime字段控件值显示短格式的做法
后台取dateTime格式,前台格式化就好了 <input type="text" name="txtPartyTime" id="txtPar ...
- cf437D The Child and Zoo
D. The Child and Zoo time limit per test 2 seconds memory limit per test 256 megabytes input standar ...
- 九度OJ 1437 To Fill or Not to Fill
题目大意:小明从杭州去往某目的地,要经过一些加油站,每个加油站的价格不一样.若能顺利到达,求加油费用最少为多少,否则求出能行驶的最远距离. 思路:贪心算法 1>若下一加油站的价格更便宜,则只需走 ...
- Java实现一致性Hash算法深入研究
一致性Hash算法 关于一致性Hash算法,在我之前的博文中已经有多次提到了,MemCache超详细解读一文中”一致性Hash算法”部分,对于为什么要使用一致性Hash算法和一致性Hash算法的算法原 ...
- 基于控制权限和登录验证跳转的django登录界面的实现
django框架提供了出去登录和退出系统的login和logout的视图函数,本实现中使用系统自带的是视图函数.需要在settings.py,urls.py,views.py和模板文件等几个方面进行考 ...
- Maven--生命周期和插件(四)
<Maven--搭建开发环境(一)> <Maven--构建企业级仓库(二)> <Maven—几个需要补充的问题(三)> <Maven—生命周期和插件(四)&g ...