文档章节

详细介绍HTML5新增的定时器requestAnimationFramerequestID = requestAnimationFrame(callback);

青石细雨一拖鞋
 青石细雨一拖鞋
发布于 2017/09/03 17:06
字数 885
阅读 26
收藏 0

        与setTimeoutsetInterval不同,requestAnimationFrame不需要设置时间间隔。这有什么好处呢?为什么requestAnimationFrame被称为神器呢?本文将详细介绍HTML5新增的定时器requestAnimationFrame .

引入

  计时器一直是javascript动画的核心技术。而编写动画循环的关键是要知道延迟时间多长合适。一方面,循环间隔必须足够短,这样才能让不同的动画效果显得平滑流畅;另一方面,循环间隔还要足够长,这样才能确保浏览器有能力渲染产生的变化

  大多数电脑显示器的刷新频率是60Hz,大概相当于每秒钟重绘60次。大多数浏览器都会对重绘操作加以限制,不超过显示器的重绘频率,因为即使超过那个频率用户体验也不会有提升。因此,最平滑动画的最佳循环间隔是1000ms/60,约等于16.6ms

  而setTimeout和setInterval的问题是,它们都不精确。它们的内在运行机制决定了时间间隔参数实际上只是指定了把动画代码添加到浏览器UI线程队列中以等待执行的时间。如果队列前面已经加入了其他任务,那动画代码就要等前面的任务完成后再执行

  requestAnimationFrame采用系统时间间隔,保持最佳绘制效率,不会因为间隔时间过短,造成过度绘制,增加开销;也不会因为间隔时间太长,使用动画卡顿不流畅,让各种网页动画效果能够有一个统一的刷新机制,从而节省系统资源,提高系统性能,改善视觉效果

 

特点

  【1】requestAnimationFrame会把每一帧中的所有DOM操作集中起来,在一次重绘或回流中就完成,并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率

  【2】在隐藏或不可见的元素中,requestAnimationFrame将不会进行重绘或回流,这当然就意味着更少的CPU、GPU和内存使用量

  【3】requestAnimationFrame是由浏览器专门为动画提供的API,在运行时浏览器会自动优化方法的调用,并且如果页面不是激活状态下的话,动画会自动暂停,有效节省了CPU开销

 

使用

  requestAnimationFrame的用法与settimeout很相似,只是不需要设置时间间隔而已。requestAnimationFrame使用一个回调函数作为参数,这个回调函数会在浏览器重绘之前调用。它返回一个整数,表示定时器的编号,这个值可以传递给cancelAnimationFrame用于取消这个函数的执行

requestID = requestAnimationFrame(callback); 
//控制台输出1和0
var timer = requestAnimationFrame(function(){
    console.log(0);
}); 
console.log(timer);//1

cancelAnimationFrame方法用于取消定时器

//控制台什么都不输出
var timer = requestAnimationFrame(function(){
    console.log(0);
}); 
cancelAnimationFrame(timer);

  也可以直接使用返回值进行取消

var timer = requestAnimationFrame(function(){
    console.log(0);
}); 
cancelAnimationFrame(1);

兼容

  IE9-浏览器不支持该方法,可以使用setTimeout来兼容

【简单兼容】

window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();

【更全面的兼容方法】

(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.7 - (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);
        };
    }
}());

 

本文转载自:http://www.cnblogs.com/xiaohuochai/p/5777186.html

共有 人打赏支持
青石细雨一拖鞋
粉丝 0
博文 2
码字总数 170
作品 0
宜昌
程序员
私信 提问
HTML5新增的定时器requestAnimationFrame

引入   计时器一直是javascript动画的核心技术。而编写动画循环的关键是要知道延迟时间多长合适。一方面,循环间隔必须足够短,这样才能让不同的动画效果显得平滑流畅;另一方面,循环间隔...

呵呵闯
11/06
0
0
HTML中标签的rel属性的含义_HTML5新增属性值

HTML中<a>标签有个rel属性,这篇文章简要介绍下rel属性的含义、Value,及在HTML5中新增的一些属性值。 1、rel属性定义: <a>标签的rel属性用于指出当前文档与被链接文档的关系。仅在有href属...

囧南风囧
2012/08/24
0
0
HTML5开发手机App之:HTML5系统教程-何韬-专题视频课程

HTML5开发手机App之:HTML5系统教程—23518人已学习 课程介绍 通过案例进行详尽的讲解,浓缩HTML5开发APP之前端基础语法,掌握HTML5的开发方法,为进一步的深入学习打下基础。 课程收益 使零...

pkutao
2016/02/04
0
0
分享一个HTML5的上传jQuery插件 - jQuery HTML5 uploader

随着HTML5的使用越来越被大家接受,基于HTML5的技术和插件也会变得越来越广泛,今天我们介绍一款基于HTML5和jQuery的上传插件: jQuery HTML5 uploader。 使用这个插件将会使得文件上传变得简...

gbin1
2011/11/19
0
0
探索HTML5之本地文件系统API - File System API

日期:2012-4-12 来源:GBin1.com 新的HTML5标准给我们带来了大量的新特性和惊喜,例如,画图的画布Canvas,多媒体的audio和video等等。除了上面我们提到的,还有比较新的特性 - File Syste...

gbin1
2012/04/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

CentOS7.4 搭建 ss

一键安装 shadowsocks-go 版 wget –no-check-certificate https://raw.githubusercontent.com/teddysun/shadowsocks_install/master/shadowsocks-go.sh chmod +x shadowsocks-go.sh ./s......

YunOu
14分钟前
2
0
Spark Streaming整合kafka实战

kafka作为一个实时的分布式消息队列,实时的生产和消费消息,这里我们可以利用SparkStreaming实时计算框架实时地读取kafka中的数据然后进行计算。在spark1.3版本后,kafkaUtils里面提供了两个...

hblt-j
14分钟前
1
0
vue组件中的样式属性scoped实例

vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素 。接下来通过本文给大家分享vue组件中的样式属性scoped实例详解 **Scoped CSS** Scoped CSS规范是Web组件产...

前端攻城老湿
30分钟前
2
0
ios 面试部分整理

assign weak区别 assign不是有崩溃的风险么 strong和copy 对非容器类可变类型 非容器类不可变 容器类可变容器类不可变 进行深拷贝浅拷贝有什么区别 什么样的对象可以进行拷贝 就是这个NScod...

大魔王周晓辉
31分钟前
2
0
浅谈教你如何掌握Linux系统

linux能做什么?相信绝大数人都有这样的疑问。可以玩吃鸡吗?可以玩lol吗? 如果你是以娱乐的名义来评价linux的可用性,对不起,linux可能不适合你,因为linux是一个工具,他是教你聪明的,不...

Linux就该这么学
31分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部