set Interval to requestanimationframe

Question

class MakeCanvas 
    constructor : (elemId,width,height,@slideTimeThrottled) ->  
     @ctx = document.getElementById(elemId).getContext '2d' 
     @ctx.canvas.width = width 
     @ctx.canvas.height = height 
     @ctx.canvas.style.marginTop = (((height/2) * -1)+(43/2))+'px' 

     @aniInterval = null 
     clearInterval @aniInterval 
     @frameNum = 0 

    drawFrame : -> 
     console.log 'drawFrame not overwritten' 

    animate : -> 
     clearInterval @aniInterval 
     @frameNum = 0 
     @aniInterval = setInterval (=> 
      @ctx.clearRect 0, 0, @ctx.canvas.width, @ctx.canvas.height 
      @drawFrame() 
      @frameNum++ 
      @stop() if @frameNum > @slideTimeThrottled 
     ), frameRate 
    stop : -> 
     clearInterval @aniInterval 

Я использую класс coffeescript, чтобы попытаться автоматизировать некоторые основные функции холста. Вышеприведенный код работает очень хорошо по большей части, но я бы очень хотел начать использовать requestanimationframe вместо setInterval.

Я хотел бы использовать polyfill размещенный здесь: https://gist.github.com/1579671

К сожалению, я просто не получаю его. Как этот класс может быть переписан для того, чтобы функционировать одинаково, и вместо этого использовать requestanimationframe?

Answer 1

# requestAnimationFrame() shim by Paul Irish 
# http://paulirish.com/2011/requestanimationframe-for-smart-animating/ 

window.requestAnimFrame = (-> 
    window.requestAnimationFrame or window.webkitRequestAnimationFrame or       window.mozRequestAnimationFrame or window.oRequestAnimationFrame or window.msRequestAnimationFrame or (callback, element) -> 
    window.setTimeout callback, 1000/60 
)() 

# Behaves the same as setInterval except uses requestAnimationFrame() where possible for better performance 
# @param {function} fn The callback function 
# @param {int} delay The delay in milliseconds 

window.requestInterval = (fn, delay) -> 

    return window.setInterval(fn, delay) if not window.requestAnimationFrame and not   window.webkitRequestAnimationFrame and not (window.mozRequestAnimationFrame and  window.mozCancelRequestAnimationFrame) and not window.oRequestAnimationFrame and not  window.msRequestAnimationFrame 

    start = new Date().getTime() 
    handle = {} 

    theLoop = -> 
    current = new Date().getTime() 
    delta = current - start 
    if delta >= delay 
     fn.call() 
     start = new Date().getTime() 
    handle.value = requestAnimFrame(theLoop) 

    handle.value = requestAnimFrame(theLoop) 
    return handle 
# Behaves the same as clearInterval except uses cancelRequestAnimationFrame() where possible for better performance 
# @param {int|object} fn The callback function 

window.clearRequestInterval = (handle) -> 
    (if window.cancelAnimationFrame then window.cancelAnimationFrame(handle.value) else (if  window.webkitCancelAnimationFrame then window.webkitCancelAnimationFrame(handle.value) else  (if window.webkitCancelRequestAnimationFrame then  window.webkitCancelRequestAnimationFrame(handle.value) else (if  window.mozCancelRequestAnimationFrame then window.mozCancelRequestAnimationFrame(handle.value)  else (if window.oCancelRequestAnimationFrame then  window.oCancelRequestAnimationFrame(handle.value) else (if window.msCancelRequestAnimationFrame then window.msCancelRequestAnimationFrame(handle.value)   else clearInterval(handle)))))))