温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

requestAnimationFrame如何使用

发布时间:2023-02-22 16:07:49 来源:亿速云 阅读:105 作者:iii 栏目:开发技术

本篇内容主要讲解“requestAnimationFrame如何使用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“requestAnimationFrame如何使用”吧!

    requestAnimationFrame--use是什么

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

    回调函数

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

    调用频率

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

    返回啥

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

    如何用window.requestAnimationFrame(callback);

    示例

    requestAnimationFrame如何使用

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

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

    多个运行情况

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

    requestAnimationFrame如何使用

    执行调试输出内容为

    requestAnimationFrame如何使用

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

    停止执行

    cancelAnimationFrame

    requestAnimationFrame如何使用

    动画运用

    requestAnimationFrame如何使用

    到此,相信大家对“requestAnimationFrame如何使用”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

    向AI问一下细节

    免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

    AI