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 相关文章推荐
javascript学习笔记(十四) window对象使用介绍
Jun 20 Javascript
JavaScript定时器详解及实例
Aug 01 Javascript
浏览器兼容console对象的简要解决方案分享
Oct 24 Javascript
JS/Jquery判断对象为空的方法
Jun 11 Javascript
浅析Ajax语法
Dec 05 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
Apr 07 Javascript
webpack配置文件和常用配置项介绍
Apr 28 Javascript
jQuery条件分页 代替离线查询(附代码)
Aug 17 jQuery
jQuery实现的回车触发按钮事件功能示例
Mar 25 jQuery
mock.js实现模拟生成假数据功能示例
Jan 15 Javascript
微信小程序 轮播图实现原理及优化详解
Sep 29 Javascript
Vue如何基于vue-i18n实现多国语言兼容
Jul 17 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
全国FM电台频率大全 - 18 湖南省
2020/03/11 无线电
让PHP更快的提供文件下载的代码
2012/06/13 PHP
PHP register_shutdown_function函数的深入解析
2013/06/03 PHP
浅谈PHP中单引号和双引号到底有啥区别呢?
2015/03/04 PHP
jquery checkbox实现单选小例
2013/11/27 Javascript
控制input输入框中提示信息的显示和隐藏的方法
2014/02/12 Javascript
使用node.js 制作网站前台后台
2014/11/13 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
2015/11/29 Javascript
jQuery的框架介绍
2016/05/11 Javascript
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
2016/05/28 Javascript
js学习之----深入理解闭包
2016/11/21 Javascript
js实现兼容PC端和移动端滑块拖动选择数字效果
2017/02/16 Javascript
Vue文件配置全局变量的实例
2018/09/06 Javascript
vue 本地环境跨域请求proxyTable的方法
2018/09/19 Javascript
vue微信分享的实现(在当前页面分享其他页面)
2019/04/16 Javascript
webpack proxy 使用(代理的使用)
2020/01/10 Javascript
JavaScript组合模式---引入案例分析
2020/05/23 Javascript
解决vue scoped scss 无效的问题
2020/09/04 Javascript
js实现Element中input组件的部分功能并封装成组件(实例代码)
2021/03/02 Javascript
python实现批量转换文件编码(批转换编码示例)
2014/01/23 Python
python中pygame模块用法实例
2014/10/09 Python
Python实现的字典值比较功能示例
2018/01/08 Python
使用django-crontab实现定时任务的示例
2018/02/26 Python
python数据持久存储 pickle模块的基本使用方法解析
2019/08/30 Python
使用tensorflow显示pb模型的所有网络结点方式
2020/01/23 Python
Java Unsafe类实现原理及测试代码
2020/09/15 Python
关于PyCharm安装后修改路径名称使其可重新打开的问题
2020/10/20 Python
HTML5 Canvas阴影使用方法实例演示
2013/08/02 HTML / CSS
Tory Burch德国官网:美国时尚生活品牌
2018/01/03 全球购物
实习单位推荐信范文
2013/11/27 职场文书
宿舍卫生检讨书
2014/01/16 职场文书
违反学校规定检讨书
2014/01/18 职场文书
20年同学聚会邀请函
2014/02/04 职场文书
小学语文复习计划
2015/01/19 职场文书
Go Plugins插件的实现方式
2021/08/07 Golang
Python语法学习之进程的创建与常用方法详解
2022/04/08 Python