JavaScript requestAnimationFrame动画详解

(编辑：jimmy 日期: 2024/11/20 浏览：3 次 )

进入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"htmlcode">

function animate() {
  console.log("animation");
  window.requestAnimationFrame(animate);
 }
animate();





requestAnimationFrame(animate)是关键，它为要执行的函数设置了动画，所以浏览器控制台会一直执行animate()函数。
浏览器兼容性

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

上一篇：React-Native使用Mobx实现购物车功能
下一篇：SVG动画vivus.js库使用小结(实例代码)