Đạt được tốc độ khung hình hơi ổn định với requestAnimationFrame?

Question

Tôi đang phát xung quanh với số requestAnimationFrame nhưng tôi nhận được các hoạt ảnh rất khó khăn trong bất kỳ trình duyệt nào khác ngoài Chrome.

tôi có thể tạo một đối tượng như thế này:

var object = function() { 

    var lastrender = (new Date()).getTime(); 
    var delta = 0; 

    return { 

     update: function() { 
      //do updates using delta value in calculations. 
     }, 

     loop: function() { 
      var looptimestamp = (new Date()).getTime(); 
      delta = looptimestamp - lastrender; 
      lastrender = looptimestamp; 

      this.update(); 

      window.requestAnimationFrame(this.loop.bind(this)); 
     } 
    }; 
} 

Ngay bây giờ tôi chỉ vẽ một hình chữ nhật duy nhất trên một yếu tố canvas và di chuyển nó xung quanh. Nó là một hoạt động rất nhẹ trên bộ vi xử lý. Điều này đang chạy khá trơn tru trong Chrome và khi tôi điều khiển ghi lại giá trị delta, nó gần như là đồng nhất quanh ~ 17. Tuy nhiên, nếu tôi làm như vậy trong Firefox hoặc Safari tôi nhận được các giá trị châu thổ sau:

17-3-17-2-32-34-32-31-19-31-17-3-0-14-3-14-35-31-16-3-17-2 ... and so on 

Có vẻ như nếu trình duyệt không đồng bộ hóa với màn hình rất độc đáo, và trong mọi trường hợp khác ngoài Chrome, người ta sẽ có hình động mượt mà hơn bằng cách sử dụng phương pháp setTimeout cũ với 16ms làm thời gian chờ mục tiêu.

Có ai biết không, nếu có thể có hoạt ảnh mượt mà hơn bằng cách sử dụng requestAnimationFrame trong các trình duyệt không phải Chrome? Có ai đã thành công trong việc nhận được giá trị đồng bằng ổn định hơn so với những giá trị được đăng ở trên trong Firefox không?

Answer 1

Bạn có thể nhận được hình ảnh động mượt mà hơn nếu bạn bỏ qua cập nhật khi đồng bằng < ngưỡng, ví dụ:

if (delta > 5) this.update(); 

Answer 2

Lý do framerate mịn của hình ảnh động của bạn giảm là do bộ nhớ của trình duyệt của bạn liên quan đến các Tranh sơn dầu. Tôi không biết chi tiết thực sự của hiệu suất trong các trình duyệt nhưng firefox gần như ngay lập tức có tốc độ giảm tốc độ khung hình và trong chrome lần giảm xảy ra một thời gian sau đó.

Sự cố thực sự của tốc độ khung hình thả xuống là do bộ nhớ bị chiếm bởi phần tử canvas. Mỗi khi bạn vẽ thứ gì đó vào canvas, thao tác đó sẽ được lưu vào đường dẫn của canvas. Con đường này chiếm nhiều bộ nhớ hơn mỗi khi bạn vẽ một thứ gì đó trên canvas. Nếu bạn không làm trống đường dẫn của canvas, bạn sẽ có tốc độ khung hình giảm xuống. Không thể làm trống đường dẫn canvas bằng cách xóa canvas bằng context.clearRect(x, y, w, h);, thay vào đó bạn phải đặt lại đường dẫn canvas bằng cách bắt đầu đường dẫn mới với context.beginPath();. Ví dụ:

// function that draws you content or animation 
function draw(){ 
    // start a new path/empty canvas path 
    canvas.beginPath(); 

    // actual drawing of content or animation here 
}