Блог

Я новичок в анимации, но недавно создал анимацию с помощью setTimeout . Частота кадров в секунду была слишком низкой, поэтому я нашел решение для использования 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?

Внимание! Этот вопрос не о лучшем способе прокладки requestAnimFrame . Если вы ищете это, перейдите к любому другому ответу на этой странице.

Вас обманула автоматическая вставка точки с запятой. Попробуйте это:

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

javascript автоматически ставит точку с запятой после вашего return утверждения. Это происходит потому, что за ним следует новая строка, а следующая строка является допустимым выражением. Фактически это переводится в:

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

Этот код возвращает undefined и никогда не выполняет код, стоящий за оператором return. Так window.requestAnimFrame и есть undefined . Когда вы вызываете его в animloop , javascript выдает ошибку и останавливает выполнение. Вы можете решить проблему, заключив выражение в круглые скобки.

Могу ли я порекомендовать Chrome developer tools или firebug для проверки выполнения javascript. С помощью этих инструментов вы бы увидели ошибку. Вы должны выполнить его отладку следующим образом (я предполагаю, что Chrome):

1. Выполните код (он выдает неожиданные результаты)
2. Откройте инструменты разработчика (щелкните правой кнопкой мыши -> Проверить элемент) Вы увидите красный крестик в строке состояния справа (это означает, что произошла ошибка при выполнении)
3. Откройте вкладку консоль
4. Вы увидите
   

   Неперехваченная ошибка типа: свойство ‘requestAnimFrame’ объекта [object DOMWindow] не является функцией

5. Введите в консоли: window.requestAnimFrame и нажмите enter, вы увидите, что это undefined . К настоящему моменту вы знаете, что проблема на самом деле не связана с requestAnimationFrame и что вам следует сосредоточиться на первой части вашего кода.
6. Теперь речь идет о сужении кода до точки, где он возвращает что-то. Это сложная часть, и если вы все еще не нашли ее на данном этапе, возможно, вам захочется обратиться к Интернету за дополнительной помощью.

Кроме того, посмотрите это видео, чтобы узнать о некоторых полезных приемах написания javascript, в нем также упоминается злая автоматическая вставка точки с запятой.

  /*
  Provides requestAnimationFrame in a cross browser way.
  http://paulirish.com/2011/requestanimationframe-for-smart-animating/
 */

if (!window.requestAnimationFrame) {

    window.requestAnimationFrame = (function() {

        return window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame || // comment out if FF4 is slow (it caps framerate at ~30fps: https://bugzilla.mozilla.org/show_bug.cgi?id=630127)
        window.oRequestAnimationFrame ||
            window.msRequestAnimationFrame ||
            function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {

                window.setTimeout(callback, 1000 / 60);

        };

    })();

}

animate();

function animate() {
    requestAnimationFrame(animate);
    draw();
}

function draw() {
    // Put your code here
}
  

Взгляните на приведенный ниже пример jsfiddle; Он ясно иллюстрирует, что я имею в виду;

http://jsfiddle.net/XQpzU/4358/light/

Надеюсь, это поможет!

«Разумное регулирование, чтобы событие не запускалось больше раз, чем экран может перерисовать изменение:

 var requestFrame = window.requestAnimationFrame ||
                   window.webkitRequestAnimationFrame ||
                   // polyfill - throttle fall-back for unsupported browsers
                   (function() {
                       var throttle = false,
                           FPS = 1000 / 60; // 60fps (in ms)
       
                       return function(CB) {
                         if( throttle ) return;
                         throttle = true;
                         setTimeout(function(){ throttle = false }, FPS);
                         CB(); // do your thing
                       }
                    })();

/////////////////////////////
// use case:

function doSomething() {
  console.log('fired');
}

window.onscroll = function() {
  requestFrame(doSomething);
};  

 html, body{ height:300%; }
body::before{ content:'scroll here'; position:fixed; font:2em Arial; }