Почему jQuery не использует requestAnimationFrame?

некоторые браузеры поддерживают requestAnimationFrame, Так почему бы не использовать его? В конце концов, это было поддерживается с Google Chrome 10. Несмотря на это, jQuery похоже, не использует его. Я нашел сообщить об ошибке об этом, но никакого реального объяснения дали? Я уверен, что у людей jQuery есть свои причины.

почему бы им не использовать этот API-интерфейс?

72
jquery requestanimationframe

3 ответов

на билет № 9381 вы можете прочитать, почему они перестали использовать requestionAnimationFrame через какое-то время.

подводя итог, проблемы заключались в том, что анимации не запускались (браузеры пытаются уменьшить нагрузку на процессор), когда окно не имело фокуса, что нормально, если окно скрыто, но не если оно видно, просто вне фокуса. Кроме того, очереди анимации накапливались, и после того, как окно восстановило фокус, все стало безумным. Это потребует уродливых изменений в коде и / или изменений в том, как люди добавляют вещи в очередь анимации. Поэтому было решено, что поддержка будет удалена, пока не будет лучшего способа сделать это.

73

учитывая другие ответы и возражения здесь, я хотел проверить это на простой анимации слайд-шоу:

http://brass9.com/nature

по состоянию на 2013 возражения в других ответах здесь больше не кажутся существенными. Я добавил

https://github.com/gnarf/jquery-requestAnimationFrame/blob/master/src/jquery.requestAnimationFrame.js

к моему существующему коду анимации и проверено, что он включается и влияет на анимацию fade в использовании. Он работает надежно, даже в фоновых окнах, в Chrome 30, IE 11 и FF 24. Тестирование Android 2.3, похоже, использует polyfill и работает так, как ожидалось.

jQuery 3

jQuery 3.0 интегрирует requestAnimationFrame. В принципе, jQuery может справиться с этим нормально, но некоторые пользователи будут вызывать .setInterval(function() { tag.animate(, испортив его. Таким образом, punt для выпуска основной версии. jQuery 3 не поддерживает и никогда не будет поддерживать IE8 и ниже, поэтому, если у вас есть пользователи IE8, придерживайтесь jQuery 1.x.

CSS переходы

в моем тестировании претензии CPU / battery-saving requestAnimationFrame являются ложными обещаниями. Я вижу высокое использование процессора с ним, например, long-fades. Что такое сохранить CPU / аккумулятор CSS переходы, вероятно, потому, что браузер, особенно мобильные браузеры, получают гораздо более сильные предположения о том, что вы намерены и что еще от них требуется, а родной код все еще быстрее, чем Javascript+DOM.

поэтому, если вы действительно хотите сохранить CPU / battery, CSS-переходы для вас. IE9 и ниже не могут справиться с ними, и там все еще много пользователей, поэтому рассмотрим С помощью jQuery.транзит и их отступление к animate в нижней части страницы.

11

в источнике jQuery для v1.6.2, я вижу requestAnimationFrame используется, если он присутствует. Я не изучал код очень подробно, чтобы увидеть, что он используется для всего, для чего он может быть использован, но он используется в разделе анимации кода вместо вызова setInterval(). Вот код из 1.6.2:

// Start an animation from one number to another
custom: function( from, to, unit ) {
    var self = this,
        fx = jQuery.fx,
        raf;

    this.startTime = fxNow || createFxNow();
    this.start = from;
    this.end = to;
    this.unit = unit || this.unit || ( jQuery.cssNumber[ this.prop ] ? "" : "px" );
    this.now = this.start;
    this.pos = this.state = 0;

    function t( gotoEnd ) {
        return self.step(gotoEnd);
    }

    t.elem = this.elem;

    if ( t() && jQuery.timers.push(t) && !timerId ) {
        // Use requestAnimationFrame instead of setInterval if available
        if ( requestAnimationFrame ) {
            timerId = true;
            raf = function() {
                // When timerId gets set to null at any point, this stops
                if ( timerId ) {
                    requestAnimationFrame( raf );
                    fx.tick();
                }
            };
            requestAnimationFrame( raf );
        } else {
            timerId = setInterval( fx.tick, fx.interval );
        }
    }
},

я еще не использую 1.6.4, поэтому я не знаю об этой версии. Если это не в этой версии, то должны были быть некоторые проблемы, так что это было удаленный.

EDIT:

Если вы читали этот блог, похоже, что он был вытащен из 1.6.3 и, возможно, будет возвращен в 1.7, и основная причина, по которой он был вытащен, заключается в том, что он сломал некоторые вещи, которые люди "неправильно" использовали очередь анимации (хотя, возможно, это вопрос мнения).

6