window.requestAnimationFrame()的使用,处理更流畅的动画效果
1.前言
在说明这个js的api用法之前,我先给个效果以及源码:
1. 页面效果
2. 页面源码
2.说明
window.requestAnimationFrame()这个API是浏览器提供的js全局方法,针对动画效果。
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
简单说明:
- 定义了一个立即执行函数,形成具备作用域,避免污染全局空间。
- 将功能函数挂在了window.
- 利用setTimeout和clearTimeout的异步实现相应的功能,不是为一种很好的结局方案。
- 如果对异步有疑问,可以查看我的另一篇博客js的执行机制
window.requestAnimationFrame()的使用,处理更流畅的动画效果的更多相关文章
- 仿window阿里旺旺登陆界面,打印机吐纸动画效果-b
偶然的机会发现window的阿里旺旺的登陆效果蛮有意思的,于是就模仿着做了一下打印机吐纸的动画效果看起来很神奇的东西,实现起来却不难,下面我给大家看下主要的源码. - (void)createUI{ ...
- 【安卓开发】用PageTransformer打造更好的动画效果
Android的ViewPager类已经变成一个相当流行的Android应用组件了.它简单直观,并且提供了极好的功能.你可以经常在设置向导,图片画廊种看到它,它还是分开应用内容的良好方式. 标准的Vi ...
- QPropertyAnimation 几行代码快速制作流畅的动画效果
QPropertyAnimation Class 官方英文文档[点击前往] QPropertyAnimation Class 中文译文文档[点击前往] 简介 QPropertyAnimation ...
- window.requestAnimationFrame
今天小猪在看一个html5的demo时一直在找他的动画是怎么实现的,按照我的理解就应该是调用setInterval来循环调用动画函数来实现.但是在Demo中就是找不到这个函数.干着急的小猪只好一步一步 ...
- window.requestAnimationFrame() ,做逐帧动画,你值得拥有
window.requestAnimationFrame() 方法告诉浏览器您希望执行动画,并请求浏览器调用指定的函数在下一次重绘之前更新动画.该方法使用一个回调函数作为参数,这个回调函数会在浏览器重 ...
- window.requestAnimationFrame与Tween.js配合使用实现动画缓动效果
window.requestAnimationFrame 概述 window.requestAnimationFrame()这个方法是用来在页面重绘之前,通知浏览器调用一个指定的函数,以满足开发者操作 ...
- Window.requestAnimationFrame()动画更新
概述 Window.requestAnimationFrame()方法告诉浏览器你希望执行动画,并且再下一次重绘之前要求浏览器调用一个特定的函数去更新动画.该方法把一个回调函数作为参数,该回调函数会在 ...
- WebGL中使用window.requestAnimationFrame创建主循环
今天总结记录一下WebGL中主循环的创建和作用.我先说明什么是主循环,其实单纯的webgl不存在主循环这个概念,这个概念是由渲染引擎引入的,主循环就是利用一个死循环或无截止条件的递归达到定时刷新can ...
- 网页性能管理详解:浅谈chrome-Timeline及window.requestAnimationFrame()方法
你遇到过性能很差的网页吗? 这种网页响应非常缓慢,占用大量的CPU和内存,浏览起来常常有卡顿,页面的动画效果也不流畅. 你会有什么反应?我猜想,大多数用户会关闭这个页面,改为访问其他网站.作为一个开发 ...
随机推荐
- dashi 成长 > 领导 > 平台 > 钱 人品 态度 能力 价值
https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=thy3557s https://www.aliyun.com/min ...
- C# xml转化为类集合
XmlDocument doc = new XmlDocument(); doc.Load(HttpContext.Current.Server.MapPath("~/WebConfig/w ...
- kotlin基础 字符串模板
${变量名} var tmp="字符串模板” print("今天学习${tmp}这个知识点")
- Springmvc 异步处理
package com.lookcoder.haircutmember.controller.login.page.async; import org.slf4j.Logger; import org ...
- java判断是excel2003还是2007以上
public static Workbook create(InputStream in) throws IOException,InvalidFormatException { if (!in.ma ...
- WebGL学习笔记(十二):加载模型文件
目前为止,我们用到的模型顶点uv信息等,都是直接定义在代码中的,实际使用中,这些数据应该是由3D编辑器编辑好后按照一定的格式存储在文件中的,我们需要从文件中提取出对应的数据之后,组合成我们可以使用的信 ...
- Linux下查看占用CPU资源最多的几个进程
linux下获取占用CPU资源最多的10个进程: ps aux|head -1;ps aux|grep -v PID|sort -rn -k +3|head linux下获取占用内存资源最多的10个进 ...
- 【ARM-Linux开发】用VS2013+VELT-0.1.4进行海思平台 Linux内核 的开发
1.1 什么是VELT VELT的全称是Visual EmbedLinuxTools,它是一个与visual gdb类似的visual studio插件,用以辅助完成Linux开发.利用这个插件 ...
- 【javascript】日期转字符串
function dateFormat(fmt, date) { var ret; var tf = function(str, len){ if(str.length < len) { for ...
- 一个 frameset 框架
<frameset border="0" framespacing="0" rows="45,*" frameborder=" ...