Có muốn kiểm soát FPS của hoạt ảnh của tôi một lý do chính đáng để tiếp tục sử dụng setTimeout thay cho requestAnimationFrame không?

Question

Tôi tự hỏi liệu tôi có nên chuyển trò chơi của mình sang requestAnimationFrame hay không. Nếu thậm chí vẫn còn một lý do để làm như vậy nữa, như tôi đã đọc rằng setTimeout() bây giờ cũng tạm dừng khi bạn chuyển đổi các tab trong các trình duyệt chính.

Dù sao, nói rằng tôi muốn điều khiển FPS hoạt ảnh của mình.

Hiện nay tôi có thể làm điều đó như thế này:

k.state.loopinterval = 
window.setInterval(renderLoop(), 1000/k.settings.engine.fps); 

đâu k.settings.engine.fps là fps truy nã.

Nếu tôi làm điều đó một cách requestAnimationFrame, tôi đã làm mất khả năng này, và nó sẽ chỉ cho tôi bất cứ điều gì nó có thể cung cấp:

window.requestAnimFrame(k.operations.startLoop); 
renderLoop(); 

Tôi đã thấy một số người đề nghị đặt requestAnimFrame trong vòng lặp khác:

setInterval(function() { 
    requestAnimationFrame(draw); 
}, 1000/60); 

Vì vậy, tôi nên làm gì? Để lại nó như nó là?

Lợi ích chính xác của requestAnimationFrame, bây giờ setTimeout đó cũng bị tạm dừng khi chuyển đổi tab?

Answer 1

requestAnimationFrame là cách chính xác để tạo hoạt ảnh.

Tại sao?

Do trình duyệt có thể tối ưu hóa kết xuất để tạo hoạt ảnh mượt mà hơn. Trả lời câu hỏi, một cách khác là:

window.requestAnimFrame = (function(){ 
    return window.requestAnimationFrame  || 
      window.webkitRequestAnimationFrame || 
      window.mozRequestAnimationFrame || 
      window.oRequestAnimationFrame  || 
      window.msRequestAnimationFrame  || 
      function(callback, element){ 
      window.setTimeout(callback, 1000/60); 
      }; 
})(); 

Và có một cách khác trong liên kết bên dưới.

Khi bạn gọi requestAnimation, bạn làm cho trình duyệt hiểu khi nào là thời điểm vẽ lại html. Nếu bạn tạo hoạt ảnh/chuyển tiếp trong CSS và di chuyển nội dung hoặc thay đổi nền (dưới dạng sprites), bằng cách sử dụng requestAnimation sẽ làm cho kết xuất hoạt động khi bạn gọi requestAnimation. Nếu không có nó, trình duyệt sẽ hiển thị mọi thứ trong thời gian đó, những gì có thể vẽ lại nhiều hơn khi cần thiết.

Thậm chí, cách trình duyệt đang diễn ra, nó sẽ tối ưu hóa nhiều hơn chúng tôi chưa biết. Làm cho trình duyệt hiểu những gì chúng ta đang làm và sau đó chúng giúp chúng ta.

Tôi tìm thấy this link, có thể thêm một số ý tưởng khác