Einige Browser unterstützen requestAnimationFrame
, warum also nicht? Immerhin wird es seit Google Chrome 10 unterstützt . Trotzdem scheint jQuery es nicht zu verwenden . Ich habe einen Fehlerbericht darüber gefunden, aber es wurde keine wirkliche Erklärung gegeben? Ich bin mir jedoch sicher, dass die jQuery-Leute ihre Gründe haben.
Warum würden sie diese großartige API nicht verwenden?
jquery
requestanimationframe
Zufälliges Blau
quelle
quelle
requestAnimationFrame
, habe ich in 1.8 Hooks hinzugefügt, mit denen Sie diesetInterval
Schleife überschreiben können, um einrequestAnimationFrame
PluginrequestAnimationFrame
. jQuery 3.0 hat es wieder aktiviert, als es im Juni 2016 veröffentlicht wurde, nachdem jQuery 1.6.3 es im September 2011 deaktiviert hatte .Antworten:
In Ticket Nr. 9381 können Sie nachlesen, warum sie
requestionAnimationFrame
nach einiger Zeit nicht mehr verwendet werden.Zusammenfassend lässt sich sagen, dass Animationen nicht ausgeführt wurden (Browser versuchen, die CPU-Auslastung zu reduzieren), wenn das Fenster keinen Fokus hatte. Dies ist in Ordnung, wenn das Fenster ausgeblendet ist, aber nicht, wenn es sichtbar ist, nur außerhalb des Fokus. Außerdem häuften sich die Animationswarteschlangen und nachdem das Fenster wieder fokussiert war, wurde es wahnsinnig. Dies würde hässliche Änderungen im Code und / oder Änderungen beim Hinzufügen von Dingen zur Animationswarteschlange erfordern. Daher wurde beschlossen, die Unterstützung zu entfernen, bis es einen besseren Weg gibt, dies zu tun.
quelle
setInterval
withrequestAnimationFrame
- github.com/gnarf37/jquery-requestAnimationFramesetInterval(function{ $('.slideshow).animate(...); }, 3000);
. Stattdessen sollten sie warten, bis das Ende jeder Animation die zweite in die Warteschlange stellt. Es ist eine einfache Lösung und wir könnten alle viel flüssigere, batteriebewusste Animationen erhalten, wenn es landen würde.Angesichts der anderen Antworten und Einwände hier wollte ich dies an einer einfachen Diashow-Animation testen:
http://brass9.com/nature
Ab 2013 scheinen die Einwände in anderen Antworten hier nicht mehr signifikant zu sein. Ich habe hinzugefügt
https://github.com/gnarf/jquery-requestAnimationFrame/blob/master/src/jquery.requestAnimationFrame.js
zu meinem vorhandenen Animationscode und überprüft, ob er sich einschaltet und die verwendeten Überblendanimationen beeinflusst. Es funktioniert zuverlässig, auch in Hintergrundfenstern, in Chrome 30, IE 11 und FF 24. Beim Testen von Android 2.3 scheint es die Polyfüllung zu verwenden und wie erwartet zu funktionieren.
jQuery 3
jQuery 3.0 integriert requestAnimationFrame . Grundsätzlich könnte jQuery gut damit umgehen, aber einige Benutzer würden anrufen
.setInterval(function() { tag.animate(
und es vermasseln. Also die Punt to Major Version Release. jQuery 3 unterstützt IE8 und niedriger nicht und wird es auch nie unterstützen. Wenn Sie also IE8-Benutzer haben, bleiben Sie bei jQuery 1.x.CSS-Übergänge
In meinen Tests sind die CPU- / Batteriesparansprüche
requestAnimationFrame
falsche Versprechungen. Ich sehe eine hohe CPU-Auslastung, zum Beispiel bei langen Überblendungen. Was CPU / Batterie spart, sind CSS-Übergänge , wahrscheinlich weil der Browser, insbesondere mobile Browser, viel stärkere Annahmen darüber treffen kann, was Sie beabsichtigen und was sonst noch von ihnen verlangt wird, und nativer Code immer noch schneller als Javascript + DOM ist.Wenn Sie also wirklich CPU / Akku sparen möchten, sind CSS-Übergänge genau das Richtige für Sie. IE9 und niedriger können damit nicht umgehen, und es gibt immer noch viele Benutzer. Betrachten Sie also jquery.transit und deren Fallback bis
animate
zum Ende der Seite.quelle
In der jQuery-Quelle für Version 1.6.2 wird
requestAnimationFrame
sie verwendet, wenn sie vorhanden ist. Ich habe den Code nicht im Detail untersucht, um festzustellen, dass er für alles verwendet wird, wofür er verwendet werden kann, aber er wird im Animationsabschnitt des Codes anstelle eines Aufrufs von verwendetsetInterval()
. Hier ist der Code aus 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 ); } } },
Ich verwende 1.6.4 noch nicht, daher weiß ich nichts über diese Version. Wenn es nicht in dieser Version ist, muss es einige Probleme gegeben haben, so dass es entfernt wurde.
BEARBEITEN:
Wenn Sie diesen Blog-Beitrag lesen , hört es sich so an, als wäre er aus 1.6.3 herausgezogen worden und wird möglicherweise wieder in 1.7 aufgenommen. Der Hauptgrund dafür ist, dass einige Dinge kaputt gegangen sind, die die Animationswarteschlange für (falsch) verwendet hat ( obwohl das vielleicht Ansichtssache ist).
quelle
requestionAnimationFrame
ohne Übereinstimmung gemacht