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 相关文章推荐
一个不错的应用,用于提交获取文章内容,不推荐用
Mar 03 Javascript
根据地区不同显示时间的javascript代码
Aug 13 Javascript
5款JavaScript代码压缩工具推荐
Jul 07 Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
Oct 31 Javascript
node.js中的fs.createReadStream方法使用说明
Dec 17 Javascript
jquery表单验证插件formValidator使用方法
Apr 01 Javascript
js实现div模拟模态对话框展现URL内容
May 27 Javascript
bootstrap模态框实现拖拽效果
Dec 14 Javascript
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 jQuery
vue实现选项卡及选项卡切换效果
Apr 24 Javascript
vue指令之表单控件绑定v-model v-model与v-bind结合使用
Apr 17 Javascript
使用这 6个Vue加载动画库来减少我们网站的跳出率
May 18 Vue.js
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
PHP4和PHP5共存于一系统
2006/11/17 PHP
CodeIgniter安全相关设置汇总
2014/07/03 PHP
php数组使用规则分析
2015/02/27 PHP
codeigniter中view通过循环显示数组数据的方法
2015/03/20 PHP
简介WordPress中用于获取首页和站点链接的PHP函数
2015/12/17 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
PHP下载文件函数与用法示例
2019/09/27 PHP
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
实现web打印的各种方法介绍及实现代码
2013/01/09 Javascript
JS实现点击图片在当前页面放大并可关闭的漂亮效果
2013/10/18 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
2014/10/08 Javascript
jQuery使用$.ajax进行即时验证的方法
2015/12/08 Javascript
[原创]jQuery常用的4种加载方式分析
2016/07/25 Javascript
JavaScript日期对象(Date)基本用法示例
2017/01/18 Javascript
vue.js+Element实现表格里的增删改查
2017/01/18 Javascript
Node.js pipe实现源码解析
2017/08/12 Javascript
移动端H5页面返回并刷新页面(BFcache)的方法
2018/11/06 Javascript
js中关于Blob对象的介绍与使用
2019/11/29 Javascript
jQuery实现电梯导航模块
2020/12/22 jQuery
Python sys.argv用法实例
2015/05/28 Python
在python中使用with打开多个文件的方法
2019/01/07 Python
Python设计模式之职责链模式原理与用法实例分析
2019/01/11 Python
GDAL 矢量属性数据修改方式(python)
2020/03/10 Python
深入浅析pycharm中 Make available to all projects的含义
2020/09/15 Python
意大利自行车商店:Cingolani Bike Shop
2019/09/03 全球购物
Gibson London官网:以地道的英国男装而著称
2019/12/06 全球购物
PHP经典面试题
2016/09/03 面试题
do you have any Best Practice for testing
2016/06/04 面试题
精选干货:Java精选笔试题附答案
2014/01/18 面试题
幼儿园三八妇女节活动方案
2014/03/11 职场文书
旷课检讨书范文
2015/01/27 职场文书
升学宴家长致辞
2015/07/27 职场文书
浅谈redis缓存在项目中的使用
2021/05/20 Redis
解决Python字典查找报Keyerror的问题
2021/05/26 Python
教你用Java在个人电脑上实现微信扫码支付
2021/06/13 Java/Android
Oracle 多表查询基本语法实例
2022/04/18 Oracle