requestAnimationFrame请求动画帧

一、前言

在Web应用中,实现动画效果的方法比较多:

  • CSS3:Transition(过度) / Animation(动画)

  • HTML5:Canvas

  • JavaScript:setInterval(定时器) / requestAnimationFrame(请求动画帧) / jQuery

本篇文章重点讲解 requestAnimationFrame 请求动画帧

requestAnimationFrame 的用法跟 setInterval 差不多,与 setInterval 相比,最大的优势是 由浏览器来决定函数的执行时机。形象一点的解释就是:告诉浏览器说 “我这里有一个函数要执行,你有空了帮忙执行一下”,然后浏览器相对比较空闲的时候就给执行了。

二、相关概念

为了理解 requestAnimationFrame 背后的原理,我们首先需要了解一下与之相关的几个概念。

1. 页面可见

当页面被最小化或者被切换成后台标签页时,页面为不可见,浏览器会触发一个 visibilitychange 事件,并设置 document.hidden 属性为 true;切换到显示状态时,页面为可见,也同样触发一个 visibilitychange 事件,设置 document.hidden 属性为 false

2. 动画帧请求回调函数列表

每个 Document 都有一个动画帧请求回调函数列表,该列表可以看成是由 <handlerId, callback> 元组组成的集合。其中 handlerId 是一个整数,唯一地标识了元组在列表中的位置;callback 是回调函数。

3. 屏幕刷新频率

即图像在屏幕上更新的速度,也即屏幕上的图像每秒钟出现的次数,它的单位是赫兹(Hz)。 对于一般笔记本电脑,这个频率大概是 60Hz, 这个值的设定受屏幕分辨率、屏幕尺寸和显卡的影响。

4. 动画原理

根据上面的原理我们知道,你眼前所看到图像正在以每秒60次的频率刷新,由于刷新频率很高,因此你感觉不到它在刷新。而 动画本质就是要让人眼看到图像被刷新而引起变化的视觉效果,这个变化要以连贯的、平滑的方式进行过渡。 那怎么样才能做到这种效果呢?

刷新频率为60Hz的屏幕每 16.7ms 1000 ÷ 60 ≈ 16.7 1000 \div 60 \approx 16.7 1000÷6016.7) 刷新一次,我们在屏幕每次刷新前,将图像的位置向左移动一个像素,即 1px。这样一来,屏幕每次刷出来的图像位置都比前一个要差1px,因此你会看到图像在移动;由于我们人眼的视觉停留效应,当前位置的图像停留在大脑的印象还没消失,紧接着图像又被移到了下一个位置,因此你才会看到图像在流畅的移动,这就是视觉效果上形成的动画。

三、API

1. 语法

const handlerId = window.requestAnimationFrame(callback);
  • callback:下一次重绘之前更新动画帧所调用的函数(回调函数)。
  • handlerId:请求 ID,大于 0 的长整型 ,唯一标识了该回调函数在回调列表中的位置。

2. 浏览器执行过程

  1. 首先要 判断 document.hidden 属性是否为true,即页面处于可见状态下才会执行;
  2. 浏览器 清空 上一轮的动画函数;
  3. handlerIdcallback<handlerId , callback> 的形式 推入 到动画帧请求回调函数列;
  4. 浏览器会 遍历 动画帧请求回调函数列表,根据 handlerId 的值大小,依次去执行相应的动画函数。

3. 取消动画函数

cancelAnimationFrame(handlerId);

四、使用

1. 动画

requestAnimationFrame API 本身的设计就是用来解决 JavaScript 动画的性能问题。那么,为什么 requestAnimationFrame 做动画性能会更好呢?主要原因在于 requestAnimationFrame 更加智能,它并非加快执行速度,而是适当时候降帧,防止并解决丢帧问题。当它发现无法维持60fps的频率时,它会把频率降低到30fps来保持帧数的稳定。也就是说如果上一次 rAF(即 requestAnimationFrame 缩写) 的回调执行时间过长,那么触发下一次 rAF 回调的时间就会缩短,反之亦然,这也是为什么说由浏览器来决定执行时机性能会更好。

我们来看一个进度条的实现:

<div class="progress"><div class="v"></div>
</div>
<button type="button" onclick="onLoading()">Loading</button>
<button type="button" onclick="onStop()">Stop</button>
.progress {width: 300px;height: 10px;border-radius: 12px;background: #eee;margin-bottom: 16px;
}
.v {height: 100%;background: cornflowerblue;border-radius: 12px;
}
// -- 获取DOM元素
let progress = document.querySelector('.v');
// -- 记录步长
let step;
// -- 记录回调函数
let handlerId;
// -- 动画帧回调函数
function render() {step++;progress.style.width = `${step}%`;if (step < 100) {handlerId = window.requestAnimationFrame(render);}
}
// -- 点击Loading按钮时触发,调用动画效果
function onLoading() {step = 0;progress.style.width = '0%';render();
}
// -- 点击Stop按钮时触发,停止动画
function onStop() {cancelAnimationFrame(handlerId);
}

演示效果:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2. 函数节流

在高频率事件中,为了防止16ms内发生多次函数执行,使用 rAF 可保证16ms 内只触发一次,这既能保证流畅性也能更好的节省函数执行的开销。(注:16ms内函数执行多次没有意义,因为显示器16ms 刷新一次,多次执行并不会在界面上有任何显示)

window.onmousemove = ({ clientX, clientY }) => {requestAnimationFrame(() => {console.log(clientX, clientY);});
};

3. CPU节能

rAF 的另一个特性是:如果页面不是激活状态下的话,函数会自动暂停,有效节省了CPU开销。

在移动端,如果页面中有自动播放的轮播图、倒计时或使用 setTimeout / setInterval 来执行任务的定时器。那么 当应用进到后台或是锁屏后,WebViewCoreThread 仍然持续占用CPU,导致耗电。而使用 rAF 可以很简单的解决此类问题。

4. 优雅降级

由于兼容性问题,需要降级对接口进行封装,优先使用高级特性,再根据浏览器不同情况进行回退,直到只能使用 setTimeout

参考:https://github.com/darius/requestAnimationFrame

5. 分帧初始化

都知道,rAF 的执行时间约为16.7ms,即为一帧。那么可以使用它将页面初始化的函数进行打散到每一帧里,这样 可以在初始化时降低CPU及内存开销

很多页面,初始化加载时,CPU 都会有很明显的波动,就是因为大量的操作都集中到了一点上。

举个例子:

页面中有4个模块,A、B、C、D,在页面加载时进行实例化,一般的写法类似于:

$(function(){new A();new B();new C();new D();
})

而使用 rAF 可将每个模块分别初始化,即 每个模块都有16ms的初始化时间

class A {}
class B {}
class C {}
class D {}
var lazyLoadList = [A, B, C, D];
lazyLoadList.forEach((module) => {window.requestAnimationFrame(() => {new module();});
});

6. 异步化

rAF 实际是一种异步化的操作,曾经:

setTimeout(() => { /* ... */ }, 0);

一度成为解决了很多前端疑难杂症的法宝。而现在,可以用它来代替。

五、setInverval 🆚 rAF

这里主要是比较二者在动画上的区别

📌 setInverval

setInverval 是通过设置一个间隔时间来不断的改变图像的位置,从而达到动画效果的。但利用 setInverval 实现的动画在某些低端机上会出现卡顿、抖动的现象。 这种现象的产生有两个原因:

  • setInverval 的执行时间并不是确定的。在 Javascript 中, setInverval 任务(宏任务)被放进了异步队列中,只有当主线程上的任务执行完以后,才会去检查该队列里的任务是否需要开始执行,因此 setInverval 的实际执行时间一般要比其设定的时间晚一些。
  • 刷新频率受屏幕分辨率和屏幕尺寸的影响,因此不同设备的屏幕刷新频率可能会不同,而 setInterval 只能设置一个固定的时间间隔,这个时间不一定和屏幕的刷新时间相同。

以上两种情况都会导致 setInterval 的执行步调和屏幕的刷新步调不一致,从而引起 丢帧 现象。 那为什么步调不一致就会引起丢帧呢?

首先要明白,setInterval 的执行只是在内存中对图像属性进行改变,这个变化必须要等到屏幕下次刷新时才会被更新到屏幕上。如果两者的步调不一致,就可能会导致中间某一帧的操作被跨越过去,而直接更新下一帧的图像。

假设屏幕每隔16.7ms刷新一次,而 setInterval 每隔10ms设置图像向左移动1px, 就会出现如下绘制过程:

  • 第0ms : 屏幕未刷新,等待中,setInterval 也未执行,等待中;
  • 第10ms: 屏幕未刷新,等待中,setInterval 开始执行并设置图像属性left=1px;
  • 第16.7ms: 屏幕开始刷新,屏幕上的图像向左移动了1px, setInterval 未执行,继续等待中;
  • 第20ms: 屏幕未刷新,等待中,setInterval 开始执行并设置left=2px;
  • 第30ms: 屏幕未刷新,等待中,setInterval 开始执行并设置left=3px;
  • 第33.4ms:屏幕开始刷新,屏幕上的图像向左移动了3px,setInterval 未执行,继续等待中;

从上面的绘制过程中可以看出,屏幕没有更新 left=2px 的那一帧画面,图像直接从1px的位置跳到了3px的的位置,这就是丢帧现象,这种现象就会引起动画卡顿。

📌 requestAnimationFrame

setInterval 相比,rAF 最大的优势是由系统来决定回调函数的执行时机。具体一点讲,如果屏幕刷新率是60Hz,那么回调函数就每16.7ms 被执行一次,如果刷新率是75Hz,那么这个时间间隔就变成了1000/75=13.3ms,换句话说就是,rAF 的步伐跟着系统的刷新步伐走。它能保证回调函数在屏幕每一次的刷新间隔中只被执行一次,这样就不会引起丢帧现象,也不会导致动画出现卡顿的问题。

这个API的调用很简单,如下所示:

var progress = 0;
// -- 回调函数
function render() {  // 修改图像的位置  progress += 1; if (progress < 100) {  // 在动画没有结束前,递归渲染    window.requestAnimationFrame(render); }
}
// -- 第一帧渲染
window.requestAnimationFrame(render);

除此之外,requestAnimationFrame 还有以下两个优势:

  • CPU节能:使用 setInterval 实现的动画,当页面被隐藏或最小化时,setInterval 仍然在后台执行动画任务,由于此时页面处于不可见或不可用状态,刷新动画是没有意义的,完全是浪费CPU资源。而 rAF 则完全不同,当页面处于未激活的状态下,该页面的屏幕刷新任务也会被系统暂停,因此跟着系统步伐走的 rAF 也会停止渲染,当页面被激活时,动画就从上次停留的地方继续执行,有效节省了CPU开销。

  • 函数节流:在高频率事件( resize / scroll等 )中,为了防止在一个刷新间隔内发生多次函数执行,使用 rAF 可保证每个刷新间隔内,函数只被执行一次,这样既能保证流畅性,也能更好的节省函数执行的开销。一个刷新间隔内函数执行多次时没有意义的,因为显示器每16.7ms刷新一次,多次绘制并不会在屏幕上体现出来。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/687648.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

腾讯云服务器部署前后端服务

服务器&#xff1a;OpenCloudOS &#xff08;兼容centos8&#xff09; 后端&#xff1a;javaSpringboot 前端&#xff1a;Vue 下载jdk 1&#xff09;下载jdk11 wget https://download.java.net/openjdk/jdk11/ri/openjdk-1128_linux-x64_bin.tar.gz 2&#xff09;解压jdk …

印象笔记大师:揭秘高效管理的终极技巧,让你的信息整理事半功倍!

印象笔记&#xff08;Evernote&#xff09;是一款功能强大的笔记应用&#xff0c;它可以帮助用户记录、整理和管理各种信息。无论是工作、学习还是日常生活&#xff0c;印象笔记都能为我们提供便捷的服务。本文将全面详细地介绍印象笔记的使用技巧&#xff0c;包括基本介绍、主…

Gartner发布降低企业软件供应链安全风险指南:全球软件供应链相关法规、指南以及企业需要开展的三个方面工作

软件供应链攻击呈三位数增长&#xff0c;但很少有企业机构采取措施对这些复杂攻击的风险进行评估。安全和风险管理领导者可参考本文&#xff0c;采用三种实践来检测和预防攻击&#xff0c;保护企业机构的安全。 主要发现 虽然软件供应链攻击频繁发生&#xff0c;但其安全评估尚…

2024数维杯B题详细思路代码数学建模高质量保姆级

2024年第九届数维杯大学生数学建模挑战赛题目 B 题 生物质和煤共热解问题的研究 &#xff08;1&#xff09;基于附件一&#xff0c;请分析正己烷不溶物(INS)对热解产率&#xff08;主要 考虑焦油产率、水产率、焦渣产率&#xff09;是否产生显著影响&#xff1f;并利用图像 加…

1689 ssm社区老人危机干预系统myeclipse开发mysql数据库springMVC模式java编程计算机网页设计

一、源码特点 java ssm社区老人危机干预系统是一套完善的web设计系统&#xff08;系统采用SSM框架进行设计开发&#xff0c;springspringMVCmybatis&#xff09;&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主…

从RAID 0到RAID 10:全面解析RAID技术与应用

&#x1f407;明明跟你说过&#xff1a;个人主页 &#x1f3c5;个人专栏&#xff1a;《Linux &#xff1a;从菜鸟到飞鸟的逆袭》&#x1f3c5; &#x1f516;行路有良友&#xff0c;便是天堂&#x1f516; 目录 一、前言 1、磁盘阵列简介 2、磁盘阵列诞生背景 3、硬件RA…

无人播剧项目怎么做,快手无人播剧全攻略,版权难题一招破解!

相信大家比较关注的问题就是快手无人直播无人播剧到底是不是真的&#xff1f;是不是骗人的&#xff1f;靠不靠谱&#xff1f;是不是真的能赚钱&#xff1f;会不会涉及到版权问题&#xff1f;等等。接下来我就给大家一一做解答&#xff01; 首先关于快手无人播剧是不是骗人的&a…

Element快速上手!

Element是饿了么公司前端团队开发的一套基于Vue的组件库&#xff0c;用于快速构建网页~ 官网链接&#xff1a; Element - The worlds most popular Vue UI frameworkElement&#xff0c;一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库https://element.elem…

Rust编程语言的特点及其适合做什么

Rust编程语言的特点 Rust是一门系统级编程语言&#xff0c;它有如下特点。 1. 类C的语言语法 Rust的具体语法和C/C类似&#xff0c;都是由花括号限定代码块&#xff0c;还有一样的控制流关键字&#xff0c;例如if、else、while和for。然而&#xff0c;也并非所有的C或者C关键…

大数据Scala教程从入门到精通第六篇:Scala源文件编写和运行

一&#xff1a;Scala源文件编写和运行 1&#xff1a;源代码比较 public class HelloJava{public static void main(String[] args){System.out.println("hello scala")} } object HelloScala{//用于声明方法 入参是一个String类型的数组。返回值类型为空def main…

每日OJ题_贪心算法四②_力扣435. 无重叠区间

目录 力扣435. 无重叠区间 解析代码 力扣435. 无重叠区间 435. 无重叠区间 难度 中等 给定一个区间的集合 intervals &#xff0c;其中 intervals[i] [starti, endi] 。返回 需要移除区间的最小数量&#xff0c;使剩余区间互不重叠 。 示例 1: 输入: intervals [[1,2]…

3DGS+3D Tiles融合已成 ,更大的场景,更细腻的效果~

最近国外同行Kieran Farr发布了一个他制作的3D GussianSplatting(高斯泼溅)Google Map 3D Tiles的融合叠加的demo案例&#xff08;如下所示&#xff09;。 准确来说这是一个数据融合的实景场景&#xff0c;该实景场景使用了倾斜三维和3D GussianSplatting两种实景表达技术&…