Некоторые браузеры поддерживают requestAnimationFrame, так почему бы не использовать его? В конце концов, он поддерживался с Google Chrome 10. Несмотря на это, jQuery похоже, не использует его. Я нашел отчет об ошибках об этом, но никаких реальных объяснений не было дано? Я уверен, что у людей jQuery есть свои причины.
Почему бы им не использовать этот удивительный API?
В билет № 9381 вы можете прочитать, почему они перестали использовать requestionAnimationFrame через некоторое время.
Подводя итог, проблемы заключались в том, что анимации не выполнялись (браузеры стараются уменьшить нагрузку на процессор), когда окно не имеет фокуса, и это нормально, если окно скрыто, но нет, если оно видно, только из фокус. Кроме того, очереди анимаций складывались, и после того, как окно снова стало фокусом, все стало неистовым. Это потребует уродливых изменений в коде и/или изменения того, как люди добавляют вещи в очередь анимации. Поэтому было решено, что поддержка будет удалена, пока не будет лучшего способа сделать это.
Учитывая другие ответы и возражения, я хотел проверить это на простой анимации слайд-шоу:
С 2013 года возражения в других ответах здесь больше не представляются значительными. Я добавил
к моему существующему коду анимации, и проверил его включение и влияние на используемую анимацию затухания. Он работает надежно, даже в фоновом режиме, в Chrome 30, IE 11 и FF 24. Тестирование Android 2.3, похоже, использует polyfill и работает как ожидалось.
jQuery 3.0 интегрирует requestAnimationFrame. В принципе, jQuery может справиться с этим хорошо, но некоторые пользователи будут называть .setInterval(function() { tag.animate(, прикручивая его. Таким образом, пунт к выпуску основной версии. jQuery 3 не поддерживает и никогда не поддерживает IE8 и ниже, поэтому, если у вас есть пользователи IE8, придерживайтесь jQuery 1.x.
В моем тестировании требования к энергопотреблению CPU/батареи requestAnimationFrame являются ложными promises. Я вижу, что с ним связано высокое использование ЦП, например, длинные замирания. Что экономит CPU/аккумулятор CSS Transitions, возможно, потому что браузер, особенно мобильные браузеры, получает гораздо более сильные предположения о том, что вы намерены и что иначе их спрашивают, а собственный код все же быстрее, чем Javascript + DOM.
Итак, если вы действительно хотите сохранить CPU/аккумулятор, переходы CSS для вас. IE9 и ниже не могут их обрабатывать, и есть еще много пользователей, поэтому рассмотрите jquery.transit и их возврат к animate в в нижней части страницы.
В источнике 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, а Основная причина, по которой она была вытащена, состоит в том, что она сломала некоторые вещи, которые люди "неправильно" использовали для очереди анимации (хотя, возможно, это вопрос мнения).