javascript - 动画、FPS 和 KineticJS

Question

所以我有一个小球在屏幕上移动，我想计算 FPS。我正在使用 KineticJS (4.3.1)，它在后台使用 requestAnimationFrame。

      var anim = new Kinetic.Animation(
          function(frame) {

            //game logic
               //move ball
               //check collisions - if collision occurs, stop animation
               //redraw 

          }
      }

'frame' 对象有一个 time 属性，可以使用 frame.time 访问它，它测量自动画首次启动以来的时间（以毫秒为单位）。

     var timeSinceAnimationStarted = frame.time;

什么是测量 FPS 的准确方法？

Answer 1

一个简单的实现，具有“1s 间隔内的帧”。例如，您可以使用 5 秒间隔的帧来平滑它

// variables accessible from within function(frame)
var frameCount = 0;
var currentSecond = 0;
var frameRate = 0;

// within function(frame), called with current time on each new frame
function updateFrameRate(time) {
    var second = Math.floor(time / 1000); // ms to integer seconds
    if (second != currentSecond) {
       frameRate = frameCount;
       frameCount = 0;
       currentSecond = second;
    }
    frameCount ++;
}

Answer 2

提议的结构似乎是：

  var numFrames = 0;
  var anim = new Kinetic.Animation(
      function(frame) {

        //game logic
           //move ball
           //check collisions - if collision occurs, stop animation
           //redraw 
        numFrames++;
      }
  }

  setInterval(function(){
     alert(numFrames/1000);  //number of frames per second
     numFrames = 0;  //reset frame count
  },1000);   //every second

会是这样吗？