js动画

[GGXXMM]

一、requestAnimationFrame

与setTimeout和setInterval不同，requestAnimationFrame不需要设置时间间隔，最大的优势是由系统决定回调函数的执行时间。具体一点讲，如果屏幕刷新率是60Hz,那么回调函数就每16.7ms被执行一次。

var progress = 0;
//回调函数
function render() {  
  console.log(progress)
  progress += 1; //修改图像的位置  
  if (progress < 100) {  //在动画没有结束前，递归渲染    
    window.requestAnimationFrame(render); 
  }
}
//第一帧渲染
window.requestAnimationFrame(render);

除此之外，requestAnimationFrame还有以下两个优势：

• CPU节能：当页面处于未激活的状态，动画会自动暂停，节省了CPU开销。
• 函数节流：在高频率事件(resize,scroll等)中，为了防止在一个刷新间隔内发生多次函数执行，使用requestAnimationFrame可保证每个刷新间隔内，函数只被执行一次，这样既能保证流畅性，也能更好的节省函数执行的开销。

二、Canvas

canvas基础、动画样例

三、WebGL