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 30 Javascript
javascript 得到变量类型的函数
May 19 Javascript
Javascript无阻塞加载具体方式
Jun 28 Javascript
node.js中的fs.readdirSync方法使用说明
Dec 17 Javascript
javascript实现数独解法
Mar 14 Javascript
JS产生随机数的用法小结
Dec 10 Javascript
js css自定义分页效果
Feb 24 Javascript
微信打开网址添加在浏览器中打开提示的办法
May 20 Javascript
vue调用语音播放的方法
Sep 27 Javascript
深入学习Vue nextTick的用法及原理
Oct 08 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
Feb 07 Javascript
Vue实现圆环进度条的示例
Feb 06 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
PHP最常用的ini函数分析 针对PHP.ini配置文件
2010/04/22 PHP
php在线代理转向代码
2012/05/05 PHP
使用YUI+Ant 实现JS CSS压缩
2014/09/02 PHP
PHP实现文件上传下载实例
2016/10/18 PHP
javascript oop开发滑动(slide)菜单控件
2010/08/25 Javascript
jquery超简单实现手风琴效果的方法
2015/06/05 Javascript
jQuery插件imgPreviewQs实现上传图片预览
2016/01/15 Javascript
javascript使用 concat 方法对数组进行合并的方法
2016/09/08 Javascript
jQuery UI插件实现百度提词器效果
2016/11/21 Javascript
vue.js全局API之nextTick全面解析
2017/07/07 Javascript
[js高手之路]从原型链开始图解继承到组合继承的产生详解
2017/08/28 Javascript
js数组实现权重概率分配
2017/09/12 Javascript
js实现鼠标移动到图片产生遮罩效果
2017/10/21 Javascript
JS实现多物体运动的方法详解
2018/01/23 Javascript
javascript json字符串到json对象转义问题
2019/01/22 Javascript
JSON是什么?有哪些优点?JSON和XML的区别?
2019/04/29 Javascript
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
2019/09/06 Javascript
python 字典(dict)遍历的四种方法性能测试报告
2014/06/25 Python
python使用cStringIO实现临时内存文件访问的方法
2015/03/26 Python
python获取当前计算机cpu数量的方法
2015/04/18 Python
浅析Python的Django框架中的Memcached
2015/07/23 Python
python xlsxwriter库生成图表的应用示例
2018/03/16 Python
python中matplotlib的颜色及线条控制的示例
2018/03/16 Python
详解Python做一个名片管理系统
2019/03/14 Python
django框架CSRF防护原理与用法分析
2019/07/22 Python
tensorflow实现在函数中用tf.Print输出中间值
2020/01/21 Python
python3 循环读取excel文件并写入json操作
2020/07/14 Python
Desigual德国官网:在线购买原创服装
2018/03/27 全球购物
马来西亚户外装备商店:PTT Outdoor
2019/07/13 全球购物
大专生自我鉴定怎么写
2014/09/16 职场文书
森马旗舰店双十一营销方案
2014/09/29 职场文书
公司介绍信范文
2015/01/31 职场文书
项目验收申请报告
2015/05/15 职场文书
2015年社区国庆节活动总结
2015/07/30 职场文书
python 如何将两个实数矩阵合并为一个复数矩阵
2021/05/19 Python
Python数据结构之队列详解
2022/03/21 Python