Window.requestAnimationFrame()动画更新
概述
Window.requestAnimationFrame()
方法告诉浏览器你希望执行动画,并且再下一次重绘之前要求浏览器调用一个特定的函数去更新动画。该方法把一个回调函数作为参数,该回调函数会在浏览器下一次重绘之前执行。
注意:如果你想在浏览器下次重绘之前继续更新下一帧动画,那么回调函数自身必须再次调用Window.requestAnimationFrame()
当你准备更新你的动画的时候,你应该调用该方法。这会要求你的动画函数在浏览器下次重绘之前被调用。回调的频率一般是60次/秒,但通常会按照W3C的建议与大多数网络浏览器中的显示刷新率匹配。为了提高性能和电池寿命,因此在大多数浏览器里,当requestAnimationFrame()
运行在后台标签页或者隐藏的的<iframe>
里时,requestAnimationFrame()
会被暂停调用以提升性能和电池寿命。
回调函数会被传入DOMHighResTimeStamp
参数,DOMHighResTimeStamp
指示当前被 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);
Window.requestAnimationFrame()动画更新的更多相关文章
- window.requestAnimationFrame() ,做逐帧动画,你值得拥有
window.requestAnimationFrame() 方法告诉浏览器您希望执行动画,并请求浏览器调用指定的函数在下一次重绘之前更新动画.该方法使用一个回调函数作为参数,这个回调函数会在浏览器重 ...
- window.requestAnimationFrame与Tween.js配合使用实现动画缓动效果
window.requestAnimationFrame 概述 window.requestAnimationFrame()这个方法是用来在页面重绘之前,通知浏览器调用一个指定的函数,以满足开发者操作 ...
- window.requestAnimationFrame()的使用,处理更流畅的动画效果
https://blog.csdn.net/w2765006513/article/details/53843169 window.requestAnimationFrame()的使用 2016年12 ...
- 网页性能管理详解:浅谈chrome-Timeline及window.requestAnimationFrame()方法
你遇到过性能很差的网页吗? 这种网页响应非常缓慢,占用大量的CPU和内存,浏览起来常常有卡顿,页面的动画效果也不流畅. 你会有什么反应?我猜想,大多数用户会关闭这个页面,改为访问其他网站.作为一个开发 ...
- window.requestAnimationFrame
今天小猪在看一个html5的demo时一直在找他的动画是怎么实现的,按照我的理解就应该是调用setInterval来循环调用动画函数来实现.但是在Demo中就是找不到这个函数.干着急的小猪只好一步一步 ...
- requestAnimationFrame动画方法
一.动画方式 在HTML5/CSS3时代,实现动画的方式有许多种: 你可以用css3的animation和@keyframes: 可以用css3的transition: 还可以用原始的setTimeo ...
- 移动端 transition动画函数的封装(仿Zepto)以及 requestAnimationFrame动画函数封装(仿jQuery)
移动端 css3 transition 动画 ,requestAnimationFrame 动画 对于性能的要求,h5优先考虑: 移动端 单页有时候 制作只用到简单的css3动画即可,我们封装一下, ...
- WebGL中使用window.requestAnimationFrame创建主循环
今天总结记录一下WebGL中主循环的创建和作用.我先说明什么是主循环,其实单纯的webgl不存在主循环这个概念,这个概念是由渲染引擎引入的,主循环就是利用一个死循环或无截止条件的递归达到定时刷新can ...
- requestAnimationFrame 动画
requestAnimationFrame : 调用这个方法,就是告诉浏览器要执行动画了,从而浏览器自动计算动画时间间隔,从而在恰当的时候刷新UI, 动画更加平滑. 他的用法和setTimeout() ...
随机推荐
- 硬核数据结构,让你从B树理解到B+树
本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是周五分布式系统的第八篇文章,核心内容是B+树的原理. 今天的文章是上周B树的延伸,所以新关注的或者是有所遗忘的同学建议先从下方链接回顾 ...
- 使用pyecharts绘制词云图-淘宝商品评论展示
一.什么是词云图? 词云图是一种用来展现高频关键词的可视化表达,通过文字.色彩.图形的搭配,产生有冲击力地视觉效果,而且能够传达有价值的信息. 制作词云图的网站有很多,简单方便,适合小批量操作. BI ...
- angular 中嵌套 iframe 报错
错误如下 Error: unsafe value used in a resource URL context at DomSanitizationServiceImpl.sanitize... 解决 ...
- VMware虚拟机安装Mac OS X 10.12
VMware Workstation Pro 14 安装Mac OS X 10.12 下面是所需要的补丁工具及镜像 VMware Workstation unlocker-master(OS X 虚拟 ...
- SQL的分类使用(增删改查)
1.SQL的分类使用(*代表重点的程度) DDL ** (Data Definition Language)数据库定义语言 用来定义数据库对象: 库 表 列 等 DCL (D ...
- xargs命令_Linux xargs命令:一个给其他命令传递参数的过滤器
本文要为大家介绍的命令是 xargs,我们把它称为护花使者,因为它总是乐于协助其他的命令来完成一些事情.下面一起来看看它是如何护花的. xargs 是 execute arguments 的缩写,它的 ...
- Selenium IDE安装及简介
一.Selenium IDE安装 Selenium IDE是Firefox浏览器的一个插件,依附于Firefox浏览器.在网上搜了Selenium IDE的安装教程,大部分都是说在官网下载安装,其实最 ...
- Selenium系列(三) - 针对元素常见的简单操作
如果你还想从头学起Selenium,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1680176.html 其次,如果你不懂前端基础知识, ...
- WSL下卸载了zsh / fish后无法启动bash解决方案
最近在鼓捣wsl,感觉自己用还是蛮好用的.听说1903要更新新的cmd,还蛮期待的 解决步骤: 建议先下载个everything , windows下非常好用的文件查找软件. 启动后搜索.bashrc ...
- [math] Codeforces 597A Divisibility
题目:http://codeforces.com/problemset/problem/597/A Divisibility time limit per test 1 second memory l ...