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 相关文章推荐
JS Replace()的高级使用方法介绍
Jun 29 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
Nov 13 Javascript
jQuery的each终止或跳过示例代码
Dec 12 Javascript
JavaScript中实现最高效的数组乱序方法
Oct 11 Javascript
原生js结合html5制作小飞龙的简易跳球
Mar 30 Javascript
详解JavaScript ES6中的模板字符串
Jul 28 Javascript
Bootstrap3制作搜索框样式的方法
Jul 11 Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
Jun 01 Javascript
Vue + Elementui实现多标签页共存的方法
Jun 12 Javascript
JS中的算法与数据结构之列表(List)实例详解
Aug 16 Javascript
javascrpt密码强度校验函数详解
Mar 18 Javascript
Vue-resource安装过程及使用方法解析
Jul 21 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中header和session_start前不能有输出原因分析
2013/01/11 PHP
php常用hash加密函数
2014/11/22 PHP
JS 的应用开发初探(mootools)
2009/12/19 Javascript
jQuery中使用了document和window哪些属性和方法小结
2011/09/13 Javascript
为jQuery添加Webkit的触摸的方法分享
2014/02/02 Javascript
jquery移动节点实例
2015/01/14 Javascript
JavaScript判断按钮被点击的方法
2015/12/13 Javascript
js实现京东轮播图效果
2017/06/30 Javascript
老生常谈javascript的面向对象思想
2017/08/22 Javascript
Vue加载json文件的方法简单示例
2019/01/28 Javascript
angular 实现下拉列表组件的示例代码
2019/03/09 Javascript
基于JS实现简单滑块拼图游戏
2019/10/12 Javascript
vue之debounce属性被移除及处理详解
2019/11/13 Javascript
js实现圆形菜单选择器
2020/12/03 Javascript
[04:13]2014DOTA2国际邀请赛 专访DC目前形势不容乐观
2014/07/12 DOTA
Python简单日志处理类分享
2015/02/14 Python
不要用强制方法杀掉python线程
2017/02/26 Python
Python中单、双下划线的区别总结
2017/12/01 Python
python 多维切片之冒号和三个点的用法介绍
2018/04/19 Python
Python流行ORM框架sqlalchemy安装与使用教程
2019/06/04 Python
python3 字符串知识点学习笔记
2020/02/08 Python
python不到50行代码完成了多张excel合并的实现示例
2020/05/28 Python
Python为何不支持switch语句原理详解
2020/10/21 Python
BeautifulSoup获取指定class样式的div的实现
2020/12/07 Python
新百伦折扣店:Joe’s New Balance Outlet
2016/08/20 全球购物
美国紧身牛仔裤品牌:NYDJ
2017/05/24 全球购物
戴森台湾线上商城:Dyson Taiwan
2018/05/21 全球购物
一个精品风格的世界:Atterley
2019/05/01 全球购物
建筑工程技术应届生自荐信
2013/09/27 职场文书
《口技》教学反思
2014/02/21 职场文书
酒店开业庆典主持词
2014/03/21 职场文书
弘扬民族精神演讲稿
2014/05/07 职场文书
租房安全协议书
2014/08/20 职场文书
2014年团支部工作总结
2014/11/17 职场文书
小英雄雨来观后感
2015/06/09 职场文书
python flask开发的简单基金查询工具
2021/06/02 Python