JavaScript requestAnimationFrame动画详解


Posted in Javascript onSeptember 14, 2017

进入web2.0时代,在网页中实现动画已经不再局限于一种方法

  • 你可以用CSS3的animattion+keyframes;
  • 你也可以用css3的transition;
  • 你还可以用通过在canvas上作图来实现动画,也可以借助jQuery动画相关的API方便地实现;
  • 当然最原始的你还可以使用window.setTimout()或者window.setInterval()通过不断更新元素的状态位置等来实现动画,前提是画面的更新频率要达到每秒60次才能让肉眼看到流畅的动画效果。

认识JavaScript requestAnimationFrame

首先我们来看一下它的源码
requestAnimationFrame on github

// Adapted from https://gist.github.com/paulirish/1579671 which derived from 
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating

// requestAnimationFrame polyfill by Erik Möller.
// Fixes from Paul Irish, Tino Zijdel, Andrew Mao, Klemen Slavič, Darius Bacon

// MIT license

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

(function() {
 'use strict';

 var vendors = ['ms', 'moz', 'webkit', 'o'];
 //浏览器兼容
 for (var i = 0; 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 6/.test(window.navigator.userAgent) // iOS6 is buggy
  || !window.requestAnimationFrame || !window.cancelAnimationFrame) {
  //对于不支持的浏览器退而使用setTimeout和clearTimeout
  var lastTime = 0;
  window.requestAnimationFrame = function(callback) {
   var now = Date.now();
   var nextTime = Math.max(lastTime + 16, now);
   return setTimeout(function() { callback(lastTime = nextTime); },
        nextTime - now);
  };
  window.cancelAnimationFrame = clearTimeout;
 }
}());

相信那一点点源码的阅读对大家都没有问题,就算读不懂也没关系,会调用api就可以了

requestAnimationFrame的优点

浏览器可以优化并行的动画动作,更合理的重新排列动作序列,并把能够合并的动作放在一个渲染周期内完成,从而呈现出更流畅的动画效果。比如,通过requestAnimationFrame(),JS动画能够和CSS动画/变换或SVG SMIL动画同步发生。另外,如果在一个浏览器标签页里运行一个动画,当这个标签页不可见时,浏览器会暂停它,这会减少CPU,内存的压力,节省电池电量。

用法示例:

function animate() {
  console.log("animation");
  window.requestAnimationFrame(animate);
 }
animate();

JavaScript requestAnimationFrame动画详解

requestAnimationFrame(animate)是关键,它为要执行的函数设置了动画,所以浏览器控制台会一直执行animate()函数。

浏览器兼容性

JavaScript requestAnimationFrame动画详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 表单验证扩展代码(一)
Oct 11 Javascript
js用Date对象处理时间实现思路及代码
Jan 31 Javascript
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
Jul 05 Javascript
将json对象转换为字符串的方法
Feb 20 Javascript
JavaScript的jQuery库中ready方法的学习教程
Aug 14 Javascript
jQuery制作网页版选项卡
Jul 28 Javascript
jQuery遍历节点方法汇总(推荐)
May 13 jQuery
手机注册发送验证码倒计时的简单实例
Nov 15 Javascript
vue动态路由配置及路由传参的方式
May 23 Javascript
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
May 28 Javascript
Python版实现微信公众号扫码登陆
May 28 Javascript
SVG动画vivus.js库使用小结(实例代码)
Sep 14 #Javascript
浅谈AngularJS中使用$resource(已更新)
Sep 14 #Javascript
jQuery plugin animsition使用小结
Sep 14 #jQuery
angular.extend方法的具体使用
Sep 14 #Javascript
浅谈angular.copy() 深拷贝
Sep 14 #Javascript
说说AngularJS中的$parse和$eval的用法
Sep 14 #Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
Sep 14 #Javascript
You might like
php之readdir函数用法实例
2014/11/13 PHP
利用php操作memcache缓存的基础方法示例
2017/08/02 PHP
PHP 实现公历日期与农历日期的互转换
2017/09/13 PHP
PHP随机数函数rand()与mt_rand()的讲解
2019/03/25 PHP
如何通过PHP实现Des加密算法代码实例
2020/05/09 PHP
javascript Array.remove() 数组删除
2009/08/06 Javascript
Jquery数独游戏解析(一)-页面布局
2010/11/05 Javascript
javascript实现限制上传文件大小
2015/02/06 Javascript
实现音乐播放器的代码(html5+css3+jquery)
2015/08/04 Javascript
利用ES6的Promise.all实现至少请求多长时间的实例
2017/08/28 Javascript
ES6中的Promise代码详解
2017/10/09 Javascript
微信小程序倒计时功能实现代码
2017/11/09 Javascript
在 Node.js 中使用 async 函数的方法
2017/11/17 Javascript
js合并两个数组生成合并后的key:value数组
2018/05/09 Javascript
VUE实现可随意拖动的弹窗组件
2018/09/25 Javascript
JavaScript&quot;模拟事件&quot;的注意要点详解
2019/02/13 Javascript
js、jquery实现列表模糊搜索功能过程解析
2020/03/27 jQuery
小程序瀑布流组件实现翻页与图片懒加载
2020/05/19 Javascript
删除目录下相同文件的python代码(逐级优化)
2012/05/25 Python
python web自制框架之接受url传递过来的参数实例
2018/12/17 Python
使用Python 统计高频字数的方法
2019/01/31 Python
Python函数定义及传参方式详解(4种)
2019/03/18 Python
python pandas 时间日期的处理实现
2019/07/30 Python
原生 JS+CSS+HTML 实现时序图的方法
2019/07/31 HTML / CSS
移动端HTML5 input常见问题(小结)
2020/09/28 HTML / CSS
未婚证明书模板
2014/10/08 职场文书
销售会议开幕词
2015/01/28 职场文书
2015年医务人员医德医风自我评价
2015/03/03 职场文书
2015年五一劳动节慰问信
2015/03/23 职场文书
行政上诉状范文
2015/05/23 职场文书
主持人开场白台词
2015/05/29 职场文书
2019年学校消防安全责任书(2篇)
2019/10/09 职场文书
python解决12306登录验证码的实现
2021/04/18 Python
python 提取html文本的方法
2021/05/20 Python
浅谈如何保证Mysql主从一致
2022/03/13 MySQL
Tomcat弱口令复现及利用
2022/05/06 Servers