requestAnimationFram

window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数,该回调函数会在浏览器下一次重绘之前执行

注意:若你想在浏览器下次重绘之前继续更新下一帧动画,那么回调函数自身必须再次调用window.requestAnimationFrame()

当你准备更新动画时你应该调用此方法。这将使浏览器在下一次重绘之前调用你传入给该方法的动画函数(即你的回调函数)。回调函数执行次数通常是每秒60次,但在大多数遵循W3C建议的浏览器中,回调函数执行次数通常与浏览器屏幕刷新次数相匹配。为了提高性能和电池寿命,因此在大多数浏览器里,当requestAnimationFrame() 运行在后台标签页或者隐藏的<iframe> 里时,requestAnimationFrame() 会被暂停调用以提升性能和电池寿命。

回调函数会被传入DOMHighResTimeStamp参数,DOMHighResTimeStamp指示由RequestAnimationFrame()排队的回调开始触发的时间。指示当前被 requestAnimationFrame() 排序的回调函数被触发的时间。在同一个帧中的多个回调函数,它们每一个都会接受到一个相同的时间戳,即使在计算上一个回调函数的工作负载期间已经消耗了一些时间。该时间戳是一个十进制数,单位毫秒,最小精度为1ms(1000μs)。

window.requestAnimationFrame(callback);
callback
下一次重绘之前更新动画帧所调用的函数(即上面所说的回调函数)。该回调函数会被传入DOMHighResTimeStamp参数,该参数与performance.now()的返回值相同,它表示requestAnimationFrame() 开始去执行回调函数的时刻。

返回值节

一个 long 整数,请求 ID ,是回调列表中唯一的标识。是个非零值,没别的意义。你可以传这个值给 window.cancelAnimationFrame() 以取消回调函数。

范例

 

var start = null;
var element = document.getElementById('SomeElementYouWantToAnimate'); element.style.position = 'absolute'; function step(timestamp) { if (!start) start = timestamp; var progress = timestamp - start; element.style.left = Math.min(progress / 10, 200) + 'px'; if (progress < 2000) { window.requestAnimationFrame(step); } } window.requestAnimationFrame(step);

 

转载于:https://www.cnblogs.com/zhouyideboke/p/11213958.html

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

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

相关文章

vue/return-in-computed-property Enforce that a return statement is present in computed property

此规则强制return语句在computed属性中得完整存在。 <script> export default {computed: {/* ✓ GOOD */foo () {if (this.bar) {return this.baz} else {return this.baf}},bar: function () {return false},/* ✗ BAD */baz () {if (this.baf) {return this.baf}},ba…

vue-cli3 一直运行 /sockjs-node/info?t= 解决方案

首先 sockjs-node 是一个JavaScript库&#xff0c;提供跨浏览器JavaScript的API&#xff0c;创建了一个低延迟、全双工的浏览器和web服务器之间通信通道。 服务端&#xff1a;sockjs-node&#xff08;https://github.com/sockjs/sockjs-node&#xff09; 客户端&#xff1a;so…

Java生鲜电商平台-生鲜供应链(采购管理)

Java生鲜电商平台-生鲜供应链(采购管理) 在生鲜供应链系统中采购中心这一模块&#xff0c;它是电商公司管理采购的模块&#xff0c;包含供应商管理&#xff0c;采购订单管理&#xff0c;采购商品管理&#xff0c;在该模块中采购订单是采购中心的核心模块。在其他的比如供应商的…

链式调用setTimeout()与setInterval()的区别

使用 setTimeout()和 setInterval()创建的定时器可以用于实现有趣且有用的功能。执行时机是不能保证的&#xff0c;因为在页面的生命周期中&#xff0c;不同时间可能有其他代码在控制 JavaScript 进程。在页面下载完后的代码运行、事件处理程序、Ajax 回调函数都必须使用同样的…

Multiple Dispatch

今天在看文章的时候遇到了multiple dispatch这个术语。看看了wiki&#xff0c;写得云里雾里。最后搜了搜资料&#xff0c;基本上搞清楚了。 multiple dispatch的混淆之处在于其和object system结合在一起。当然wiki上写得很清楚&#xff1a;“a function or method can be dyna…

如何让Element UI的Message消息提示每次只弹出一个

Element UI的Message消息提示是点击一次触发一次的。在开发的时候经常会作为一些校验提示&#xff0c;但是公司的测试人员在进行测试时会一直点&#xff0c;然后就会出现如下图的情况。虽然客户使用的时候一般来说不会出现这种情况&#xff08;毕竟客户不会闲着没事一直点点点&…

jsp头文件的内容/response.setHeader

转载的&#xff01;&#xff01;&#xff01;做一个记录!!!! response.setHeader 是用来设置返回页面的头 meta 信息, 使用时 response.setHeader( name, contect ); meta是用来在HTML文档中模拟HTTP协议的响应头报文。meta 标签用于网页的<head>与</head>中 1、&l…

css3实现科技感的呼吸灯效果

呼吸灯效果是一种常见的灯光效果&#xff0c;比如网页的按钮&#xff0c;现实生活中比如电脑的开机按钮。 使用CSS3的animation方法可以实现很多迷人的网页动画特效。 使用CSS3 配合box-shadow即可实现类似的效果 样式代码如下 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18…

WIX(20121031) 应用设置默认变量

花了了好长时间找到的 这样可以将变量信息定义到wxs中&#xff0c;方便应用 <?xml version"1.0" encoding"UTF-8"?> <?define ProductName"Wix CY"?> <Wix xmlns"http://schemas.microsoft.com/wix/2006/wi">&l…

百度Echarts折线图tooltip里数据添加单位

option {title: {text: 折线图堆叠},tooltip: {trigger: axis,//在这里设置formatter: {a0}:{c0}万},legend: {data:[邮件营销,联盟广告,视频广告,直接访问,搜索引擎]},grid: {left: 3%,right: 4%,bottom: 3%,containLabel: true},toolbox: {feature: {saveAsImage: {}}},xAxi…

VUE组件 之 Drawer 抽屉

一、源码地址 https://github.com/imxiaoer/DrawerForVue 二、效果图 三、具体代码 drawer.vue <template><div class"drawer"><div :class"maskClass" click"closeByMask"></div><div :class"mainClass"…

什么是基金净值、单位净值、累计净值

基金知识-单位净值和累计净值 一投资者问&#xff1a;单位净值和累计净值分别指什么&#xff1f;如何通过这两个值来评定一个基金&#xff1f; 景顺长城基金管理有限公司答&#xff1a;基金资产净值是在某一时点上&#xff0c;基金资产的总市值扣除负债后的余额&#xff0c;代表…

Java生鲜电商平台-用户管理的架构与实战

Java生鲜电商平台-用户管理的架构与实战 在电商后台中&#xff0c;用户管理是运营人员管理用户的模块。这里的用户区别于运营人员&#xff0c;会在权限的角色管理中分别阐述。这里的用户包含平台的一般用户&#xff0c;会员用户等。本文将分享一下用户管理模块的设计心得。在设…

vue+Element-ui实现分页效果

当我们向后台请求大量数据的时候&#xff0c;并要在页面展示出来&#xff0c;请求的数据可能上百条数据或者更多的时候&#xff0c;并不想在一个页面展示&#xff0c;这就需要使用分页功能来去完成了。 1.本次所使用的是vue2.0element-ui实现一个分页功能&#xff0c;element-…

ListViewAutoScrollHelper

ListViewAutoScrollHelper转载于:https://www.cnblogs.com/ZacharyHodgeZou/p/4208350.html

wx.navigateTo跳转首页无效

问题: 首页A—B,B—C,C—A(回首页无效) 先来看首页,首页是由tabBar中三个页面组成 再来看下首页的代码组成 //只保留核心代码 "tabBar": { ... "list": [ { "pagePath": "pages/home/home", "te…

21款网页版html5小游戏源码

html5魅族创意的贪食蛇游戏源码下载 html5网页版打砖块小游戏源码下载 html5 3D立体魔方小游戏源码下载 html5网页版飞机躲避游戏源码下载 html5三国人物连连看游戏源码下载 js html5 2048数字游戏源码_2048网页版源码下载 html5盲打高手打飞字游戏下载_网页版英文打飞字游戏源…

Cookie的使用(js-cookie插件)

一、安装 npm install js-cookie --save二、引用 import Cookies from js-cookie三、一般使用 存到Cookie去 // Create a cookie, valid across the entire site: Cookies.set(name, value);// Create a cookie that expires 7 days from now, valid across the entire site…

js的array.some()方法

定义和用法 some() 方法用于检测数组中的元素是否满足指定条件&#xff08;函数提供&#xff09;。 some() 方法会依次执行数组的每个元素&#xff1a; 如果有一个元素满足条件&#xff0c;则表达式返回true , 剩余的元素不会再执行检测。如果没有满足条件的元素&#xff0c…