requestAnimationFrame使用示例详解

目录
  • requestAnimationFrame--use是什么
    • 回调函数
    • 调用频率
    • 返回啥
  • 如何用window.requestAnimationFrame(callback);
    • 示例
    • 多个运行情况
    • 停止执行
      • cancelAnimationFrame
    • 动画运用
  • 总结

requestAnimationFrame--use是什么

告诉浏览器用来执行一个动画，并且在下一次重绘之前调用其指定的回调函数取更新动画，所以该方法的参数就是一个回调函数，在下一次重绘时候调用。

回调函数

回调函数即是传入的callback，执行后其传入的参数为DOMhighResTimeStamp，表示当前回调函数执行时时间戳，单位毫秒。

调用频率

其回调函数执行次数为每秒60次，为啥是这个呢，因为在大多数浏览器种，这个频率大多都跟屏幕帧数刷新频率保持一致，即在高刷新的屏幕中会执行的更快。

返回啥

返回的是一个非零整数值，作为唯一标识，传给window.cancelAnimationFrame(),可用来清除取消回调函数。

如何用window.requestAnimationFrame(callback);

示例

可以看到浏览器在一直打印，这也就是类似动画的持续过程，一秒钟会输出60次。

那怎样让其停止，除了使用window.cancelAnimationFrame()；官方指出了为了提高性能和电池寿命，当requestAnimationFrame（）运行在后台标签页或者隐藏的iframe里，就会被暂停调用以提升性能。

多个运行情况

当一个页面有多个requestAnimationFrame时，运行情况又是怎样的呢

执行调试输出内容为

可以看出再同一毫秒时刻，两个方法会同步执行，可见并不存在先后的情况，其每次执行隔间时间戳近似等于 1000 / 60 = 16.666毫秒，这就意味页面加载一次，会一次性执行所有的requestAnimationFrame。

停止执行

cancelAnimationFrame

动画运用

效果如下图

总结

requestAnimationFrame是浏览器的一个宏任务，其用法也跟setTimeOut很相似，其执行的步骤是根据浏览器的绘制频率来的，采用系统的刷新间隔时间，可以保证在绘制的一次过程中只执行一次，确保了性能，不会出现卡顿和掉帧的情况，这样就确保了动画加载的流畅，同时也降低了cpu的消耗和内存占用，是canvas动画里面最常用的一种api。

以上就是requestAnimationFrame使用示例详解的详细内容，更多关于requestAnimationFrame使用的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 深入理解requestAnimationFrame的动画循环

    一.初识requestAnimationFrame requestAnimationFrame解决了浏览器不知道javascript动画什么时候开始.不知道最佳循环间隔时间的问题.它是跟着浏览器的绘制走的,如果浏览器绘制间隔是16.7ms,它就按这个间隔绘制:如果浏览器绘制间隔是10ms, 它就按10ms绘制.这样就不会存在过度绘制的问题,动画不会丢帧. 内部是这么运作的: 浏览器页面每次要重绘,就会通知requestAnimationFrame; 这是资源非常高效的一种利用方式. 怎么讲呢?

  • JavaScript requestAnimationFrame动画详解

    JavaScript requestAnimationFrame动画详解

    进入web2.0时代,在网页中实现动画已经不再局限于一种方法 你可以用CSS3的animattion+keyframes; 你也可以用css3的transition; 你还可以用通过在canvas上作图来实现动画,也可以借助jQuery动画相关的API方便地实现; 当然最原始的你还可以使用window.setTimout()或者window.setInterval()通过不断更新元素的状态位置等来实现动画,前提是画面的更新频率要达到每秒60次才能让肉眼看到流畅的动画效果. 认识JavaScrip

  • Three.js实现雪糕地球的使用示例详解

    Three.js实现雪糕地球的使用示例详解

    目录 前言 ThreeJS 基础——实现转动的球体 ThreeJS 纹理——实现转动的地球 交互式雪糕地球 添加 loading 效果 前言 最近的天气有几分酷热,去实验室的道路也有几分漫长,走着走着,小包感觉灵魂已经被热出窍了.回到实验室,把空调打开,雪糕吃上,静坐了几分钟,才重新感觉到灵魂的滋味,葛优躺在实验室的小床上,思维开始天马行空,世上有一万种方式能让小包凉快,但地球母亲呐,她却日渐炎热,谁能来给她降降温? 躺着躺着,进入了梦乡,小包梦到未来有一天,人类超级发达,可以穿梭时空,但发展的

  • vue+three.js实现炫酷的3D登陆页面示例详解

    vue+three.js实现炫酷的3D登陆页面示例详解

    目录 前言: Three.js的基础知识 关于场景 关于光源 关于相机(重要) 关于渲染器 完善效果 创建一个左上角的地球 使地球自转 创建星星 使星星运动 创建云以及运动轨迹 使云运动 完成three.js有关效果 结语 前言: 大家好,我是xx传媒严导(xx这两个字请自行脑补) . 该篇文章用到的主要技术:vue3.three.js 我们先看看成品效果: 高清大图预览(会有些慢): 座机小图预览: 废话不多说,直接进入正题 Three.js的基础知识 想象一下,在一个虚拟的3D世界中都需要什

  • RxJS中的Observable和Observer示例详解

    RxJS中的Observable和Observer示例详解

    目录 引言 概念 牛刀小试 Observable Observable 剖析 Observer 结束语 引言 最近在项目当中别的小伙伴使用到了Rxjs,我一眼看上去有点懵,感觉挺复杂,挺绕的.于是抓紧补补课,然后就可以和小伙伴们一起交流怎么能优雅的使用Rxjs.由于内容比较多,会分为三篇来讲解说明 初识 RxJS中的 Observable 和 Observer 细说 RxJS中的 Operators 在谈 RxJS中的 Subject和Schedulers 概念 RxJS是一个库,可以使用可观察

  • React之错误边界 Error Boundaries示例详解

    目录 引言 注意 实现 错误边界应该放置在哪? 未捕获错误(Uncaught Errors)该如何处理? 注意:自 React 15 的命名更改 引言 过去,组件内的代码异常会导致 React 的内部状态被破坏,产生可能无法追踪的错误.但 React 并没有提供一种优雅处理这些错误的方式,也无法从错误中恢复. 默认情况下,若一个组件在渲染期间(render)发生错误,会导致整个组件树全部被卸载,这当然不是我们期望的结果. 部分组件的错误不应该导致整个应用崩溃.为了解决这个问题,React 16

  • Three.js引入Cannon.js及使用示例详解

    目录 引言 大体代码及效果 Cannon.js 打造当前 UI 引言 在开始之前,我们还是要解释下什么是 Cannon.js 以及它的作用. Cannon.js 是一个 3D 物理引擎,通过为物体赋予真实的物理属性的方式来计算运动.旋转和碰撞检测.Cannon.js 相较于其他常见的物理引擎来说,比较轻量级而且完全通过 JavaScript 来实现. Cannon.js 的官方文档地址为 schteppe.github.io/cannon.js/ ,从官方介绍中也可以看到很多有趣的例子,如下所示

  • AngularJS的Filter的示例详解

    AngularJS的Filter的示例详解

    贴上几个有关Filter使用的几个示例. 1. 首先创建一个表格 <body ng-app="app"> <div class="divAll" ng-controller="tableFilter"> <input type="text" placeholder="输入你要搜索的内容" ng-model="key"> <br><br

  • bat批处理 if 命令示例详解

    if 命令示例详解 if,正如它E文中的意思,就是"如果"的意思,用来进行条件判断.翻译过来的意思就是:如果符合某一条件,便执行后面的命令. 主要用来判断,1.两个"字符串"是否相等:2.两个数值是大于.小于.等于,然后执行相应的命令. 当然还有特殊用法,如结合errorlevel:if errorlevel 1 echo error 或者结合defined(定义的意思):if defined test (echo It is defined) else echo 

  • Docker-Compose的使用示例详解

    Docker-Compose的使用示例详解

    Docker Compose是一个用来定义和运行复杂应用的Docker工具.使用Compose,你可以在一个文件中定义一个多容器应用,然后使用一条命令来启动你的应用,完成一切准备工作. - github.com/docker/compose docker-compose是用来在Docker中定义和运行复杂应用的工具,比如在一个yum文件里定义多个容器,只用一行命令就可以让一切就绪并运行. 使用docker compose我们可以在Run的层面解决很多实际问题,如:通过创建compose(基于YU

  • jQuery.Validate表单验证插件的使用示例详解

    jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求. 请在这里查看示例 validate示例 示例包含 验证错误时,显示红色错误提示 自定义验证规则 引入中文错误提示 重置表单需要执行2句话 源码示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

  • JavaScript中自带的 reduce()方法使用示例详解

    1.方法说明 , Array的reduce()把一个函数作用在这个Array的[x1, x2, x3...]上,这个函数必须接收两个参数,reduce()把结果继续和序列的下一个元素做累积计算,其效果就是: [x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4) 2. 使用示例 'use strict'; function string2int(s){ if(!s){ alert('the params empty'); return; } if

随机推荐