requestAnimationFrame简介

概述

当我们写window.requestAnimationFrame(回调函数)时,浏览器会在下次重绘前执行回调函数。

我们可以用它来做连贯的逐帧动画。例如:

function render(){
     // 一些更新界面的操作
     requestAnimationFrame(render);
}

render();

在没有requestAnimationFrame方法之前,我们只能用setTimeoutsetInterval来实现类似的效果

function render(){
     // 一些更新界面的操作
    setTimeout(render, 1000/60);// 一般浏览器是每秒60帧
}

render();

这样写的存在的问题是:如果浏览器不是每秒60帧,会造成掉帧。 还有,在性能方面,大部分在浏览器在标签页/窗口处于的时候非激活状态(如窗口最小化或标签页切换了)时,requestAnimationFrame是不会被执行的,而setTimeout/setInterval 会。具体如下

requestAnimationFrameIsStop.png

如上图所示, 只有 Firefox和chrome对 setInterval做了优化:只有时间间隔超过1s,setInterval才会在非激活的标签页/窗口中执行。

浏览器兼容性

browserCompatibility.png

兼容处理

在老的浏览器中,requestAnimationFrame的方法名是带浏览器前缀的。以下是张鑫旭为在各个浏览器中能统一的调用requestAnimationFrame做的处理。不支持requestAnimationFrame的用setTimeout来代替。

/* requestAnimationFrame.js
 * by zhangxinxu 2013-09-30
*/
(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'] ||    // name has changed in Webkit
                                      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);
        };
    }
}());

这样,就可以在所有的浏览器(包括IE6)中使用requestAnimationFrame啦~

参考

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏葡萄城控件技术团队

MultiRow发现之旅(二)- 详解属性管理器

前文回顾 MultiRow发现之旅(一)- 高效模板设计器 属性管理器 上一篇提到MultiRow模板设计器中有一个“属性管理器”,这里就聊一聊这个属性管理器。...

1899
来自专栏张戈的专栏

一行代码彻底禁用WordPress缩略图自动裁剪功能

记得在博客分享七牛缩略图教程的时候,提到过 WordPress 默认会将上传的图片裁剪成多个,不但占用磁盘空间,也会拖慢网站性能,相当闹心! 当时也提到了解决办...

3776
来自专栏谦谦君子修罗刀

RN项目第一节

一、项目说明 本项目为模仿美团的项目,采用的是网上提供的API接口。导航采用 公司推荐的react-navigation,滚动条采用第三方组件react-na...

3526
来自专栏从零开始学 Web 前端

从零开始学 Web 之 移动Web(三)Zepto

Zepto是一个轻量级的针对现代高级浏览器的 JavaScript库, 它与jquery有着类似的api。

1822
来自专栏mathor

matlab—图形界面(GUI)程序设计

matlab也能做应用程序,类似于c++的mfc,这点我也是才知道,大吃一惊,原来现在可视化编程应用如此广泛,连matlab都可以,接下来我就会讲解如何通过ma...

2682
来自专栏CRPER折腾记

React 折腾记 - (2) 实现路由动效过渡,并解决过程中奇奇怪怪的问题

注意: 这里的样式用的style-components来写的,感兴趣的可以自行了解下

1241
来自专栏移动开发之家

从Android到React Native开发(三、自定义原生控件支持)

恍惚间3个月过去了,作为揭棺而起的失踪人口,迟来的第三篇,也是react native原生相关的最后的一篇,是时候给收个尾了。这次就不废话了,直接上主题( ̄^ ̄...

1095
来自专栏前端布道

前端开发必备之Chrome开发者工具(上篇)

本文介绍的 Chrome 开发者工具基于 Chrome 65版本,如果你的 Chrome 开发者工具没有下文提到的那些内容,请检查下 Chrome 的版本 简介...

37011
来自专栏web前端

smartClient 2--可视化组件

一、功能:     1、标准功能 Foundation Services Foundation Components Event Handling Contr...

2229
来自专栏Core Net

SharePoint 2016 修改左上角连接

2956

扫码关注云+社区

领取腾讯云代金券