欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JavaScript requestAnimationFrame动画详解

程序员文章站 2022-04-29 07:51:47
进入web2.0时代,在网页中实现动画已经不再局限于一种方法 你可以用css3的animattion+keyframes; 你也可以用css3的transi...

进入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动画详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。