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 相关文章推荐
HTML 自动伸缩的表格Table js实现
Apr 01 Javascript
jquery中的事件处理详细介绍
Jun 24 Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
Mar 03 Javascript
JavaScript检测字符串中是否含有html标签实现方法
Jul 01 Javascript
javascript基础知识讲解
Jan 11 Javascript
vue如何实现observer和watcher源码解析
Mar 09 Javascript
微信小程序 flex实现导航实例详解
Apr 26 Javascript
微信小程序的生命周期的详解
Oct 19 Javascript
微信提示 在浏览器打开 效果实现过程解析
Sep 10 Javascript
js实现贪吃蛇游戏(简易版)
Sep 29 Javascript
JavaScript原生数组函数实例汇总
Oct 14 Javascript
vue element和nuxt的使用技巧分享
Jan 14 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
Codeigniter整合Tank Auth权限类库详解
2014/06/12 PHP
PHP使用GIFEncoder类处理gif图片实例
2014/07/01 PHP
PHP编程计算两个时间段是否有交集的实现方法(不算边界重叠)
2017/05/30 PHP
技术男用来对妹子表白的百度首页
2014/07/23 Javascript
网站基于flash实现的Banner图切换效果代码
2014/10/14 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
2016/04/28 Javascript
JS动态加载脚本并执行回调操作
2016/08/24 Javascript
Bootstrap笔记之缩略图、警告框实例详解
2017/03/09 Javascript
原生JS实现N级菜单的代码
2017/05/21 Javascript
微信小程序url传参写变量的方法
2018/08/09 Javascript
angularjs http与后台交互的实现示例
2018/12/21 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
2019/12/08 Javascript
vue使用lodop打印控件实现浏览器兼容打印的方法
2021/02/07 Vue.js
[02:54]DOTA2英雄基础教程 撼地者
2014/01/14 DOTA
pygame学习笔记(5):游戏精灵
2015/04/15 Python
在Python中处理字符串之isdecimal()方法的使用
2015/05/20 Python
Python 3中的yield from语法详解
2017/01/18 Python
Python中Scrapy爬虫图片处理详解
2017/11/29 Python
解决已经安装requests,却依然提示No module named requests问题
2018/05/18 Python
Python3.4学习笔记之常用操作符,条件分支和循环用法示例
2019/03/01 Python
python字典一键多值实例代码分享
2019/06/14 Python
Python爬虫requests库多种用法实例
2020/05/28 Python
python求解汉诺塔游戏
2020/07/09 Python
详解pytorch tensor和ndarray转换相关总结
2020/09/03 Python
英国Amara家居法国网站:家居装饰,现代装饰和豪华礼品
2016/12/15 全球购物
GWT都有什么特性
2016/12/02 面试题
优秀士兵个人事迹材料
2014/01/19 职场文书
市场营销专业毕业生求职信
2014/07/21 职场文书
11.9消防日宣传标语
2014/10/08 职场文书
简单的离婚协议书范本
2014/11/16 职场文书
少先队工作总结2015
2015/05/13 职场文书
为什么说餐饮很难做,是因为你不了解这些新规则
2019/08/20 职场文书
读后感怎么写?书写读后感的基本技巧!
2019/12/10 职场文书
Python 中数组和数字相乘时的注意事项说明
2021/05/10 Python
python数据处理之Pandas类型转换
2022/04/28 Python
MySQL控制流函数(-if ,elseif,else,case...when)
2022/07/07 MySQL