Anfang des Jahres wurde in Chrome 36 die Methode „element.animate“ als Teil der umfassenderen Web Animations-Spezifikation eingeführt. Damit lassen sich effiziente, native Animationen imperativ schreiben. Entwickler können ihre Animationen und Übergänge also mit dem für sie am besten geeigneten Ansatz erstellen.
Zur Erinnerung: So animieren Sie eine Wolke über den Bildschirm und verwenden einen Callback, wenn die Animation abgeschlossen ist:
var player = cloud.animate([
{transform: 'translateX(' + start + 'px)'},
{transform: 'translateX(' + end + 'px)'}
], 5000);
player.onfinish = function() {
console.info('Cloud moved across the screen!');
startRaining(cloud);
};
Das ist unglaublich einfach und sollte als Teil Ihres Toolkits in Betracht gezogen werden, wenn Sie Animationen oder Übergänge imperativ erstellen. In Chrome 39 wurden dem AnimationPlayer
-Objekt, das von element.animate
zurückgegeben wird, jedoch Funktionen zur Wiedergabesteuerung hinzugefügt. Bisher konnten Sie nach dem Erstellen einer Animation nur cancel()
aufrufen oder auf das Ereignis „finish“ warten.
Diese Wiedergabeerweiterungen eröffnen neue Möglichkeiten für Web Animations.Animationen werden so zu einem universellen Tool und sind nicht mehr nur für Übergänge vorgesehen. „fixed“- oder vordefinierte Animationen.
Pausieren, zurückspulen oder Wiedergabegeschwindigkeit ändern
Aktualisieren wir das obige Beispiel, um die Animation zu pausieren, wenn auf die Wolke geklickt wird:
cloud.addEventListener('mousedown', function() {
player.pause();
});
Sie können auch das Attribut playbackRate
ändern:
function changeWindSpeed() {
player.playbackRate *= (Math.random() * 2.0);
}
Sie können auch die Methode reverse()
aufrufen, die normalerweise dem Invertieren des aktuellen playbackRate
entspricht (mit -1 multiplizieren). Es gibt jedoch einige Sonderfälle:
Wenn die durch die Methode
reverse()
verursachte Änderung dazu führen würde, dass die laufende Animation effektiv beendet wird, wird auchcurrentTime
umgekehrt.Wenn beispielsweise eine brandneue Animation umgekehrt wird, wird die gesamte Animation rückwärts abgespielt.Wenn der Player pausiert ist, wird die Animation wiedergegeben.
Scrubbing im Player
Bei einem AnimationPlayer
kann das currentTime
jetzt auch während einer laufenden Animation geändert werden. Normalerweise steigt dieser Wert im Laufe der Zeit (oder sinkt, wenn playbackRate
negativ ist). So kann die Position einer Animation möglicherweise extern gesteuert werden, z. B. durch Nutzerinteraktion. Dies wird allgemein als Scrubbing bezeichnet.
Wenn Ihre HTML-Seite beispielsweise den Himmel darstellt und Sie möchten, dass durch eine Ziehbewegung die Position einer gerade abgespielten Wolke geändert wird, können Sie dem Dokument einige Handler hinzufügen:
var startEvent, startEventTime;
document.addEventListener('touchstart', function(event) {
startEvent = event;
startEventTime = players.currentTime;
player.pause();
});
document.addEventListener('touchmove', function(event) {
if (!startEvent) return;
var delta = startEvent.touches[0].screenX -
event.changedTouches[0].screenX;
player.currentTime = startEventTime + delta;
});
Wenn Sie das Dokument ziehen, wird die currentTime
entsprechend der Entfernung von Ihrem ursprünglichen Ereignis geändert. Sie können die Animation auch nach dem Ende der Geste fortsetzen:
document.addEventListener('touchend', function(event) {
startEvent = null;
player.play();
});
Das kann sogar mit dem Umkehren des Verhaltens kombiniert werden, je nachdem, wo die Maus von der Seite angehoben wurde (kombinierte Demo).
Anstatt ein AnimationPlayer
als Reaktion auf eine Nutzerinteraktion zu scrubben, kann auch das currentTime
verwendet werden, um den Fortschritt oder Status anzuzeigen, z. B. den Status eines Downloads.
Der Vorteil besteht darin, dass mit einem AnimationPlayer
ein Wert festgelegt werden kann und die zugrunde liegende native Implementierung sich um die Fortschrittsvisualisierung kümmert. Beim Download könnte die Dauer einer Animation auf die gesamte Downloadgröße und currentTime
auf die aktuell heruntergeladene Größe (Demo) festgelegt werden.
UI-Übergänge und ‑Gesten
Auf mobilen Plattformen sind gängige Gesten wie Ziehen, Schieben und Schnippen schon lange üblich. Diese Gesten haben in der Regel ein gemeinsames Thema: eine ziehbare UI-Komponente, z. B. „Zum Aktualisieren ziehen“ in einer Listenansicht oder eine Seitenleiste, die von der linken Seite des Bildschirms gezogen wird.
Mit Web Animations lässt sich ein ähnlicher Effekt ganz einfach im Web nachbilden – auf Computern oder Mobilgeräten. Wenn beispielsweise eine Geste zur Steuerung von currentTime
abgeschlossen ist:
var steps = [ /* animation steps */ ];
var duration = 1000;
var player = target.animate(steps, duration);
player.pause();
configureStartMoveListeners(player);
var setpoints = [0, 500, 1000];
document.addEventListener('touchend', function(event) {
var srcTime = player.currentTime;
var dstTime = findNearest(setpoints, srcTime);
var driftDuration = dstTime - srcTime;
if (!driftDuration) {
runCallback(dstTime);
return;
}
var driftPlayer = target.animate(steps, {
duration: duration,
iterationStart: Math.min(srcTime, dstTime) / duration,
iterations: Math.abs(driftDuration) / duration,
playbackRate: Math.sign(driftDuration)
});
driftPlayer.onfinish = function() { runCallback(dstTime); };
player.currentTime = dstTime;
});
Dadurch wird eine zusätzliche Animation erstellt, die einen „Drift“ ausführt. Die Linie verläuft zwischen dem Punkt, an dem die Geste abgeschlossen wurde, und dem bekannten guten Ziel.
Das funktioniert, weil Animationen eine Priorität basierend auf ihrer Erstellungsreihenfolge haben. In diesem Fall hat driftPlayer
Vorrang vor „player“. Wenn driftPlayer
abgeschlossen ist, verschwindet es und seine Auswirkungen. Die endgültige Zeit entspricht jedoch der currentTime des zugrunde liegenden Players, sodass die Benutzeroberfläche konsistent bleibt.
Wenn Sie Katzen mögen, können Sie sich diese Demo-Webanwendung ansehen, in der diese Gesten demonstriert werden. Es ist für Mobilgeräte optimiert und verwendet das Polyfill für die Abwärtskompatibilität. Probieren Sie es also auf Ihrem Mobilgerät aus.
element.animate
Die Methode element.animate
ist derzeit einfach unschlagbar – egal, ob Sie sie für einfache Animationen verwenden oder die zurückgegebenen AnimationPlayer
auf andere Weise nutzen.
Diese beiden Funktionen werden auch in anderen modernen Browsern über ein leichtgewichtiges Polyfill vollständig unterstützt. Dieses Polyfill führt auch eine Funktionserkennung durch. Wenn Browseranbieter die Spezifikation implementieren, wird diese Funktion also mit der Zeit immer schneller und besser.
Auch die Web Animations-Spezifikation wird weiterentwickelt. Wenn Sie sich für kommende Funktionen interessieren, sind diese jetzt auch in einem detaillierteren Polyfill: web-animations-next verfügbar.