https://blog.csdn.net/w2765006513/article/details/53843169

window.requestAnimationFrame()的使用

2016年12月23日 19:38:38 逆光2016 阅读数:10179 标签: 动画函数源码 更多

个人分类: js
 
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/w2765006513/article/details/53843169

1.前言

在说明这个js的api用法之前,我先给个效果以及源码: 
1. 页面效果 
2. 页面源码

2.说明

window.requestAnimationFrame()这个API是浏览器提供的js全局方法,针对动画效果。

1)使用

  1. 用法1:
function animate() {
//done();
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

注意函数里的requestAnimationFrame(animate) 
  有了这句话,就形成了递归调用,设置应为这个函数多用在持续的动画中,可以自由处理要不要这句话。 
2. 用法2:

var globalID;
function animate() {
// done(); 一直运行
globalID=requestAnimationFrame(animate);
// Do something animate
}
globalID=requestAnimationFrame(animate);//开始
cancelAnimationFrame(globalID);//结束

2)优点:

浏览器可以优化并行的动画动作,更合理的重新排列动作序列,并把能够合并的动作放在一个渲染周期内完成,从而呈现出更流畅的动画效果。

  • 经过浏览器优化,动画更流畅;
  • 窗口没激活时,动画将停止,省计算资源;

3) 使用场景:

可以调节重新渲染,大幅提高网页性能。其中最重要的,它可以将某些代码放到下一次重新渲染时执行。避免短时间内触发大量reflow。

function doubleHeight(element) {
var currentHeight = element.clientHeight;
window.requestAnimationFrame(function () {
element.style.height = (currentHeight * 2) + 'px';
});
}
elements.forEach(doubleHeight);

页面滚动事件(scroll)的监听函数,就很适合用这个api,推迟到下一次重新渲染。

$(window).on('scroll', function() {
window.requestAnimationFrame(scrollHandler);
});

最佳的应用场景还是在帧动画里,可以大幅优化性能;

4)兼容性支持

为了避免老浏览器没有提供这个api,可以先检测,后处理,没有提供api时,写对应的函数挂在window下,以后的调用与正常情况一致。 
网上大神的杰作

(function() {
var lastTime = 0;
var vendors = ['webkit', 'moz'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame =
window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
} if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
timeToCall);
lastTime = currTime + timeToCall;
return id;
}; if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}());
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

简单说明:

  1. 定义了一个立即执行函数,形成具备作用域,避免污染全局空间。
  2. 将功能函数挂在了window.
  3. 利用setTimeout和clearTimeout的异步实现相应的功能,不是为一种很好的结局方案。
  4. 如果对异步有疑问,可以查看我的另一篇博客js的执行机制

window.requestAnimationFrame()的使用,处理更流畅的动画效果的更多相关文章

  1. 仿window阿里旺旺登陆界面,打印机吐纸动画效果-b

    偶然的机会发现window的阿里旺旺的登陆效果蛮有意思的,于是就模仿着做了一下打印机吐纸的动画效果看起来很神奇的东西,实现起来却不难,下面我给大家看下主要的源码. - (void)createUI{ ...

  2. 【安卓开发】用PageTransformer打造更好的动画效果

    Android的ViewPager类已经变成一个相当流行的Android应用组件了.它简单直观,并且提供了极好的功能.你可以经常在设置向导,图片画廊种看到它,它还是分开应用内容的良好方式. 标准的Vi ...

  3. QPropertyAnimation 几行代码快速制作流畅的动画效果

    QPropertyAnimation Class 官方英文文档[点击前往] QPropertyAnimation Class 中文译文文档[点击前往]   简介 QPropertyAnimation ...

  4. window.requestAnimationFrame

    今天小猪在看一个html5的demo时一直在找他的动画是怎么实现的,按照我的理解就应该是调用setInterval来循环调用动画函数来实现.但是在Demo中就是找不到这个函数.干着急的小猪只好一步一步 ...

  5. window.requestAnimationFrame() ,做逐帧动画,你值得拥有

    window.requestAnimationFrame() 方法告诉浏览器您希望执行动画,并请求浏览器调用指定的函数在下一次重绘之前更新动画.该方法使用一个回调函数作为参数,这个回调函数会在浏览器重 ...

  6. window.requestAnimationFrame与Tween.js配合使用实现动画缓动效果

    window.requestAnimationFrame 概述 window.requestAnimationFrame()这个方法是用来在页面重绘之前,通知浏览器调用一个指定的函数,以满足开发者操作 ...

  7. Window.requestAnimationFrame()动画更新

    概述 Window.requestAnimationFrame()方法告诉浏览器你希望执行动画,并且再下一次重绘之前要求浏览器调用一个特定的函数去更新动画.该方法把一个回调函数作为参数,该回调函数会在 ...

  8. WebGL中使用window.requestAnimationFrame创建主循环

    今天总结记录一下WebGL中主循环的创建和作用.我先说明什么是主循环,其实单纯的webgl不存在主循环这个概念,这个概念是由渲染引擎引入的,主循环就是利用一个死循环或无截止条件的递归达到定时刷新can ...

  9. 网页性能管理详解:浅谈chrome-Timeline及window.requestAnimationFrame()方法

    你遇到过性能很差的网页吗? 这种网页响应非常缓慢,占用大量的CPU和内存,浏览起来常常有卡顿,页面的动画效果也不流畅. 你会有什么反应?我猜想,大多数用户会关闭这个页面,改为访问其他网站.作为一个开发 ...

随机推荐

  1. dashi 成长 > 领导 > 平台 > 钱 人品 态度 能力 价值

    https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=thy3557s https://www.aliyun.com/min ...

  2. C# xml转化为类集合

    XmlDocument doc = new XmlDocument(); doc.Load(HttpContext.Current.Server.MapPath("~/WebConfig/w ...

  3. kotlin基础 字符串模板

    ${变量名} var tmp="字符串模板” print("今天学习${tmp}这个知识点")

  4. Springmvc 异步处理

    package com.lookcoder.haircutmember.controller.login.page.async; import org.slf4j.Logger; import org ...

  5. java判断是excel2003还是2007以上

    public static Workbook create(InputStream in) throws IOException,InvalidFormatException { if (!in.ma ...

  6. WebGL学习笔记(十二):加载模型文件

    目前为止,我们用到的模型顶点uv信息等,都是直接定义在代码中的,实际使用中,这些数据应该是由3D编辑器编辑好后按照一定的格式存储在文件中的,我们需要从文件中提取出对应的数据之后,组合成我们可以使用的信 ...

  7. Linux下查看占用CPU资源最多的几个进程

    linux下获取占用CPU资源最多的10个进程: ps aux|head -1;ps aux|grep -v PID|sort -rn -k +3|head linux下获取占用内存资源最多的10个进 ...

  8. 【ARM-Linux开发】用VS2013+VELT-0.1.4进行海思平台 Linux内核 的开发

    1.1    什么是VELT VELT的全称是Visual EmbedLinuxTools,它是一个与visual gdb类似的visual studio插件,用以辅助完成Linux开发.利用这个插件 ...

  9. 【javascript】日期转字符串

    function dateFormat(fmt, date) { var ret; var tf = function(str, len){ if(str.length < len) { for ...

  10. 一个 frameset 框架

    <frameset border="0" framespacing="0" rows="45,*" frameborder=" ...