JS:指定FPS帧频,requestAnimationFrame播放动画

Flash制作动画,最基础的概念就是帧,但在Flash中,帧频的控制比较简单,只需要编译前指定一下目标帧频就可以了。

实际运行时,不需要我们关心定时器的问题,flash player会定时触发EnterFrame消息,推动Movieclip播放。

在js这一侧,需要我们设定一个定时器,并推动相应的绘制逻辑执行。

最简单:

var FPS = 60;

setInterval(draw, 1000/FPS);

这个简单做法,如果draw带有大量逻辑计算,导致计算时间超过帧等待时间时,将会出现丢帧。除外,如果FPS太高,超过了当时浏览器的重绘频率,将会造成计算浪费,例如浏览器实际才重绘2帧,但却计算了3帧,那么有1帧的计算就浪费了。

成熟做法:

引入requestAnimationFrame,这个方法是用来在页面重绘之前,通知浏览器调用一个指定的函数,以满足开发者操作动画的需求。

这个函数类似setTimeout,只调用一次。

function draw() { 
        requestAnimationFrame(draw); 
        // ... Code for Drawing the Frame ... 
}

递归调用,就可以实现定时器。

但是,这样完全跟浏览器帧频同步了,无法自定义动画的帧频,是无法满足需求的。

接下来需要考虑如何控制帧频。

简单做法:

var fps = 30;
function tick() {
  setTimeout(function() {
    requestAnimationFrame(tick);
    draw(); // ... Code for Drawing the Frame ...
  }, 1000 / fps);
}
tick();

这种做法,比较直观的可以发现,每一次setTimeout执行的时候,都还要再等到下一个requestAnimationFrame事件到达,累积下去会造成动画变慢。

自行控制时间跨度:

var fps = 30;
var now;
var then = Date.now();
var interval = 1000/fps;
var delta;

function tick() {
  requestAnimationFrame(tick);
  now = Date.now();
  delta = now - then;
  if (delta > interval) {
    // 这里不能简单then=now,否则还会出现上边简单做法的细微时间差问题。例如fps=10,每帧100ms,而现在每16ms(60fps)执行一次draw。16*7=112>100,需要7次才实际绘制一次。这个情况下,实际10帧需要112*10=1120ms>1000ms才绘制完成。
    then = now - (delta % interval);
    draw(); // ... Code for Drawing the Frame ...
  }
}
tick();

针对低版本浏览器再优化:

如果浏览器没有requestAnimationFrame函数,实际底层还只能用setTimeout模拟,上边做的都是无用功。那么可以再改进一下。

var fps = 30;
var now;
var then = Date.now();
var interval = 1000/fps;
var delta;
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

function tick() {
  if(window.requestAnimationFrame)
   {
      requestAnimationFrame(tick);
      now = Date.now();
      delta = now - then;
      if (delta > interval) {
        // 这里不能简单then=now,否则还会出现上边简单做法的细微时间差问题。例如fps=10,每帧100ms,而现在每16ms(60fps)执行一次draw。16*7=112>100,需要7次才实际绘制一次。这个情况下,实际10帧需要112*10=1120ms>1000ms才绘制完成。
        then = now - (delta % interval);
        draw(); // ... Code for Drawing the Frame ...
      }
   }
   else
   {
       setTimeout(tick, interval);
    draw();
   }
}
tick();
            

最后,还可以加上暂停。

var fps = 30;
var pause = false;
var now;
var then = Date.now();
var interval = 1000/fps;
var delta;
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

function tick() {
     if(pause)
          return;
   if(window.requestAnimationFrame)
     {
    ...
     }
     else
     {
          ...
     }
}
tick();

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏DeveWork

WordPress 开发之使用WordPress 3.8+后台图标(dashicons)

伴随着WordPress 3.8 的新界面,WordPress 官方为后台UI 引进了目前贼流行的webfont(又称 icon font),官方独立项目名为d...

1918
来自专栏Android机动车

大杀器Bodymovin和Lottie:把AE动画转换成HTML5/Android/iOS原生动画

Airbnb出了移动端的动画库Lottie,可以和一个名叫Bodymovin的AE插件结合起来,把在AE上做好的动画导出为json文件,然后以Android/i...

2491
来自专栏更流畅、简洁的软件开发方式

自然框架,拆分后的项目关系

  拆分了一下自然框架,似乎又绕回去了。以前是多个项目分开放的,有人说太分散了,还得一个个下载,麻烦。于是就做了一个解决方案,把项目都放在了一起。   现在呢,...

2215
来自专栏美丽应用

自改:(对编程友好的)百度手机输入法皮肤

1843
来自专栏大大刺猬

python优化办公(excel)02

功能说明:根据本月的某些行 找到 对应上月的相应行,在比较其某些列的不同,把不同之处标记在本月的某对应列

922
来自专栏IT派

15 个有意思的 JavaScript 和 CSS 库推荐! 你用过几个?

我们在Tutorialzine上的任务就是让你了解最新最酷的Web发展趋势。这就是为什么我们每个月都会发布一些我们偶然发现并认为值得你关注的最佳资源的缘由。

1230
来自专栏Hans362 's Lab

UTF8-BOM编码导致Html顶部白条问题

自从给博客加上了Google Adsense的广告,就出现了一个很困扰我的问题:网页顶部莫名空出了一个白条。虽然对于网页的访问没有什么影响,但是...强迫症不能...

1721
来自专栏IMWeb前端团队

setTimeout的那些事

如果懂setTimeout,可以直接看第3节,前面两节也可以当段子看一下。 如果不是很懂setTimeout,看下1,2两节应该会有一些收获。 1 Java...

2810
来自专栏非著名程序员

精选!5 个必备必知必用的前端插件

IE 不敢说话,猎豹,360 相视对瞄,世界之窗竟然动了脚步,这难道是在跃跃欲试?我靠,竟然是往后退了一步。到时火狐在跃跃欲试。这时,说时迟那时快,Chrome...

5985
来自专栏進无尽的文章

基础篇-app上传小准备及上架后搜索不显示

        app上传中会需要准备一些文件,如 icon图标,launch Image ,itunes Contect 中还需要上传不同尺寸的屏幕截图等,下...

1772

扫码关注云+社区