2013-05-14 16 views
10

Cách tạm dừng hoạt ảnh canvas được tạo bằng requestAnimationFrame? tôi bắt đầu hoạt hình như thế này:Yêu cầu CanvasAnimationTiền dừng khung hình

Code:

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

function Start() { 
    Update(); 
    requestAnimFrame(Start); 
} 

Start(); 

Bây giờ tôi muốn thêm tùy chọn tạm dừng sau khi KeyDown. Có cách nào đơn giản để làm điều đó không?

+2

Giải pháp Ivan Chub hoạt động nhưng trình duyệt sẽ tiếp tục gọi yêu cầuAnimationFrame callback. Để tránh hành vi này, hãy sử dụng [cancelAnimationFrame] (https://developer.mozilla.org/en-US/docs/DOM/window.cancelAnimationFrame). Xem xét xem yêu cầu polyfill mạnh mẽ của requestAnimationFrame được xuất bản [trong bài viết này] (http://paulirish.com/2011/requestanimationframe-for-smart-animating/). –

+0

Không nên 'requestAnimationFrame' được gọi trong' Update() '? Nếu không, bạn gọi một hàm không có gì khác ngoài gọi hàm khác. –

Trả lời

8

Việc bạn có thể làm là tạo biến lưu trữ trạng thái hoạt ảnh của bạn: bị tạm dừng hoặc bỏ tạm dừng. Thay đổi trạng thái đó mỗi khi bạn nhấp vào nút. Một cái gì đó như thế này sẽ hoạt động:

var isPaused = false; 

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

function Start() { 
    if (isPaused) { 
     Update(); 
    } 

    requestAnimFrame(Start); 
} 

window.onkeydown = function() { 
    isPaused = !isPaused; // flips the pause state 
}; 

Start();