window.requestAnimationFrame()

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

requestAnimationFrame,顾名思义就是请求动画帧。

屏幕刷新频率 一般为60Hzs

seTimeout实现动画:

利用seTimeout实现的动画在某些低端机上会出现卡顿、抖动的现象

  原因一、setTimeout的执行时间并不是确定的。在Javascript中, setTimeout 任务被放进了异步队列中,只有当主线程上的任务执行完以后,才会去检查该队列里的任务是否需要开始执行,因此 setTimeout 的实际执行时间一般要比其设定的时间晚一些。

  原因二、刷新频率受屏幕分辨率和屏幕尺寸的影响,因此不同设备的屏幕刷新频率可能会不同,而 setTimeout只能设置一个固定的时间间隔,这个时间不一定和屏幕的刷新时间相同。

  上两种情况都会导致setTimeout的执行步调和屏幕的刷新步调不一致,从而引起丢帧现象。setTimeout的执行只是在内存中对图像属性进行改变,这个变化必须要等到屏幕下次刷新时才会被更新到屏幕上。如果两者的步调不一致,就可能会导致中间某一帧的操作被跨越过去,而直接更新下一帧的图像。

requestAnimationFrame实现动画:

  requestAnimationFrame最大的优势是由系统来决定回调函数的执行时机。

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

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

  优势:

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

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

优雅降级

if (!Date.now)

    Date.now = function() { return new Date().getTime(); };

(function() {

    'use strict';
var vendors = ['webkit', 'moz'];
for (var i = ; i < vendors.length && !window.requestAnimationFrame; ++i) { var vp = vendors[i]; window.requestAnimationFrame = window[vp+'RequestAnimationFrame']; window.cancelAnimationFrame = (window[vp+'CancelAnimationFrame'] || window[vp+'CancelRequestAnimationFrame']); } if (/iP(ad|hone|od).*OS /.test(window.navigator.userAgent) // iOS6 is buggy || !window.requestAnimationFrame || !window.cancelAnimationFrame) { var lastTime = ; window.requestAnimationFrame = function(callback) { var now = Date.now(); var nextTime = Math.max(lastTime + , now); return setTimeout(function() { callback(lastTime = nextTime); }, nextTime - now); }; window.cancelAnimationFrame = clearTimeout; } }());

摘抄自:https://blog.csdn.net/vhwfr2u02q/article/details/79492303

requestAnimationFrame ---- 请求动画帧。的更多相关文章

  1. requestAnimationFrame制作动画:旋转风车

    在以往,我们在网页上制作动画效果的时候,如果是用javascript实现,一般都是通过定时器和间隔来实现的,出现HTML5之后,我们还可以用CSS3 的transitions和animations很方 ...

  2. html5 requestAnimationFrame制作动画:旋转风车

    详细内容请点击 在以往,我们在网页上制作动画效果的时候,如果是用javascript实现,一般都是通过定时器和间隔来实现的,出现HTML5之后,我们还可以用CSS3 的transitions和anim ...

  3. requestAnimationFrame 持续动画效果

    1. requestAnimationFrame 概述 requestAnimationFrame 是浏览器用于定时循环操作的一个API, 类似于setTimeout, 主要用途是按帧对网页进行重绘. ...

  4. requestAnimationFrame 提高动画性能的原因

    与setTimeout相比,requestAnimationFrame最大的优势是由系统来决定回调函数的执行时机.具体一点讲,如果屏幕刷新率是60Hz,那么回调函数就每16.7ms被执行一次,如果刷新 ...

  5. CSS3的自定义动画帧

    CSS3新增的动画帧非常绚丽,可以简单实现一些动画效果,目前除IE外各大主流浏览器都支持 本文演示三个:transform: scale3d(x, y, z)-缩放;.transform: trans ...

  6. 使用requestAnimationFrame做动画效果二

    3月是个好日子,渐渐地开始忙起来了,我做事还是不够细心,加上感冒,没精神,今天差点又出事了,做过的事情还是要检查一遍才行,哎呀. 使用requestAnimationFrame做动画,我做了很久,终于 ...

  7. U3D 动画帧事件问题

    测试版本U3D5.4. 1,为一个模型导入外部动画.为动画剪辑attack在某帧添加event,事件为 public void OnAttackEvent(){},函数体不做任何事情. 结果发现,在动 ...

  8. 【转】CSS3动画帧数科学计算法

    本文来源于:财付通TID 原作者:bboy90 总结都浓缩在这个工具里了,想知道工具的地址或想窥探工具诞生的趣事请往下看 . —————————————————————–     华丽丽的开篇     ...

  9. Unity 3D 动画帧事件

    前几天在项目开发中碰到一个这样的需求,RPG游戏中,特效和动画播放不同步的.假如主角在攻击NPC时,先实例化特效,后播放动画.动画毕竟是有一个时间长度的.等到动画播放攻击挥刀的那一瞬间时,特效可能早就 ...

随机推荐

  1. url路由

    注意: url(r'^index/', views.index)    第一个index是提交跳转的网址 (可修改)   第二个是自定义的方法 url(r'^index666/', views.ind ...

  2. python接口自动化框架

    接口测框架 安装教程 需要3.5及以上版本的python pip install -r requirements.txt 使用说明 运行manage.py创建项目 创建的项目在projects目录下 ...

  3. jvm堆、栈、String常量池

    原文地址:http://blog.csdn.net/tophawk/article/details/78704074 程序计数器:它的生命周期与线程相同,线程私有.较小的内存区域,用以完成分支.循环. ...

  4. Elasticsearch状态API接口排障总结

    ES的Restful API,共四类API: 1. 检查集群.节点.索引等健康与否,以及获取其相应状态. 2. 管理集群.节点.索引及元数据 3. 执行CRUB操作(即:增删查改) 4. 执行高级操作 ...

  5. 执行git log/status等命令时,重新打开了个窗口,必须按q才能退出

    终端运行: git config --global core.pager ''

  6. 数据分析,R语言

    数据结构 创建向量和矩阵 1 函数c(), length(), mode(), rbind(), cbind() 求平均值,和,连乘,最值,方差,标准差 1 函数mean(), sum(), min( ...

  7. 第一周第二部分 coursera.org

    即使J(,)=,也不能是完美估计,因为其他数据可能存在误差 取任何颜色并沿着“圆”走,就可以得到相同的成本函数值,右图三个点的J(,)相同 越靠近圆心,J(,)越小 梯度下降算法可以将代价函数J()最 ...

  8. 本周使用angular7所遇到的一些问题

    前言 本周在使用angular7所遇到的一些问题,学习是不断的循序渐进的过程,在本周完成对应的工作后,也要抽出一些时间用来学习,比较我们公司10点上班,我一般9点就会到,在这一个小时内看看博客,写写笔 ...

  9. OpenCV使用CMake和MinGW的编译安装

    官方教程:https://wiki.qt.io/How_to_setup_Qt_and_openCV_on_Windows 软件环境: Qt:5.11 CMake-3.14.4 OpenCV-4.1. ...

  10. 安装Windows10出现无法识别磁盘时的解决方案

    由于前些日子对deepin系统比较感兴趣,一时兴起把备用机刷成了deepin,奈何还是过分依赖windows下的软件,又不得不再刷回Win10. 但由于Linux支持的磁盘格式与Windows不同,在 ...