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的一个方法,这个方法主要功能是能实现比较平滑的动态效果,所 ...
随机推荐
- 自制单片机之二-----AT89S51ISP下载线的制做
最小系统板做好了,接下来就是做根ISP下载线了.否则程序怎么写到AT89S51芯片里呢? 先来认识一下AT89S51上ISP(在线编程)功能脚的定义 看上图的左边AT89S51引脚图的P1.5.P1. ...
- BrainFuck语言生成器
还要求生成的代码比较快和短. 当然stackexchange上面给出了实现,java的 http://codegolf.stackexchange.com/questions/5418/brainfu ...
- logstash 通过type判断
[elk@zjtest7-frontend type]$ cat input.conf input { file { type => "type_a" path => ...
- About Adultism and why things ar the way they are
About - Adultism About Adultism and why things ar the way they are In this page we will try to clari ...
- 深入了解Json转变为map的思想,附源代码2
最近在做一个投票情况的用例,返回的结果打算放到JSON中 数据库的结果集如上图所示:optionkey代表选项,optionval代表其值 第一次做的时候考虑应该键值对应的关系,所以前台接到的json ...
- 【git 问题小说说】 git add时候报错:LF will be replaced by CRLF
本文来自:http://blog.csdn.net/loovejava/article/details/22114477 最近工作在window平台,不怎么使用命令行了所以导致很多命令都不熟悉啦 哈哈 ...
- leetcode:Minimum Path Sum(路线上元素和的最小值)【面试算法题】
题目: Given a m x n grid filled with non-negative numbers, find a path from top left to bottom right w ...
- android studio 报ambiguous method call
如题,在android studio中调用this.toString时,提示的错误信息是ambiguous method call. both get class () in object and g ...
- Jquery与DOM对象
在第一次学习jquery中,常常会不能分辨DOM对象和Jquery对象,下面我们就简诉一下它们之间的关系和区别 1.DOM对象(Document Object Model) 文档对象模型,每一份DOM ...
- sqlite命令
.databases //显示所有数据库 .tables //显示所有表 .schema test //显示创建 test 表的 sql 语句 )备份和还原数据库 .backup E:/db/Stud ...