Как использовать requestAnimationFrame?

Я новичок в анимации, но недавно я создал анимацию, используя setTimeout . FPS был слишком низким, поэтому я нашел решение использовать requestAnimationFrame , описанный в этой ссылке .

Пока что мой код:

//shim layer with setTimeout fallback
    window.requestAnimFrame = (function(){
        return  
            window.requestAnimationFrame       || 
            window.webkitRequestAnimationFrame || 
            window.mozRequestAnimationFrame    || 
            window.oRequestAnimationFrame      || 
            window.msRequestAnimationFrame     || 
            function(/* function */ callback){
                window.setTimeout(callback, 1000 / 60);
            };
    })();
    (function animloop(){
        //Get metrics
        var leftCurveEndX = finalLeft - initialLeft;
        var leftCurveEndY = finalTop + finalHeight - initialTop;
        var rightCurveEndX = finalLeft + finalWidth - initialLeft - initialWidth;
        var rightCurveEndY = leftCurveEndY;

        chopElement(0, 0, 0, 0, leftCurveEndX, leftCurveEndY, rightCurveEndX, rightCurveEndY);//Creates a new frame 
        requestAnimFrame(animloop);
    })();

Это останавливается во время первого кадра. У меня есть функция обратного вызова requestAnimFrame (animloop); в функции chopElement .

Есть ли более подробное руководство по использованию этого API?

49
задан hopper 5 August 2013 в 16:16
поделиться