Anfang des Jahres wurde die Methode „element.animate“ in Chrome 36 als Teil der umfassenderen Web Animations-Spezifikation eingeführt. So können effiziente, native Animationen mit zwingender Anforderung erstellt werden. Entwickler haben dadurch die Möglichkeit, ihre Animationen und Übergänge mit dem für sie am besten geeigneten Ansatz zu erstellen.
Zur Erinnerung sehen Sie, wie Sie eine Wolke über den Bildschirm mit einem Callback animieren können:
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);
};
Allein dies ist unglaublich einfach und lohnt sich beim Erstellen von Animationen oder Übergängen als Teil Ihrer Toolbox. In Chrome 39 wurden dem von element.animate zurückgegebenen AnimationPlayer-Objekt jedoch Funktionen für die Wiedergabesteuerung hinzugefügt. Bisher konnten Sie nach dem Erstellen einer Animation nur cancel() aufrufen oder sich das Endereignis anhören.
Diese Ergänzungen zur Wiedergabe eröffnen mit Webanimationen neue Möglichkeiten: Animationen lassen sich in ein universelles Tool umwandeln, anstatt die Übergänge vorschreiben zu müssen. feste oder vordefinierte Animationen.
Wiedergabe pausieren, zurückspulen oder die Wiedergabegeschwindigkeit ändern
Beginnen wir mit dem Aktualisieren des obigen Beispiels, 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 der Invertierung des aktuellen playbackRate (multiplizieren mit -1) entspricht. Es gibt jedoch einige Sonderfälle:
Wenn die durch die Methode
reverse()ausgelöste Änderung dazu führen würde, dass die laufende Animation effektiv beendet wird, wirdcurrentTimeebenfalls invertiert. Wird z. B. eine ganz neue Animation umgekehrt, wird die gesamte Animation rückwärts wiedergegeben.Wenn der Player pausiert ist, wird die Animation abgespielt.
Scrubbing des Players
Ein AnimationPlayer ermöglicht jetzt das Ändern seines currentTime, während eine Animation ausgeführt wird. Im Allgemeinen erhöht sich dieser Wert im Laufe der Zeit (oder sinkt, wenn playbackRate negativ ist). So kann die Position einer Animation extern gesteuert werden, z. B. durch eine Nutzerinteraktion. Dies wird allgemein als Scrubbing bezeichnet.
Wenn Ihre HTML-Seite beispielsweise den Himmel repräsentiert und Sie mit einer Ziehgeste die Position einer gerade laufenden Wolke ändern möchten, 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 den Mauszeiger über das Dokument bewegen, ändert sich currentTime, um die Entfernung zum ursprünglichen Termin widerzuspiegeln. Sie können die Wiedergabe der Animation auch fortsetzen, wenn die Bewegung beendet ist:
document.addEventListener('touchend', function(event) {
startEvent = null;
player.play();
});
Dies kann sogar mit einer Umkehrfunktion kombiniert werden, je nachdem, an welcher Stelle die Maus von der Seite entfernt wurde (kombinierte Demo).
Anstelle des Scrubbings eines AnimationPlayer als Reaktion auf eine Nutzerinteraktion kann das currentTime auch verwendet werden, um den Fortschritt oder Status anzuzeigen, z. B. um den Status eines Downloads anzuzeigen.
Das Dienstprogramm hier ist, dass mit einem AnimationPlayer ein Wert festgelegt werden kann und die zugrunde liegende native Implementierung die Fortschrittsanzeige übernimmt. Im Fall des Downloads 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
Mobile Plattformen sind schon seit Langem der Bereich gängiger Gesten wie Ziehen, Schieben, Ziehen und Ähnliches. Diese Touch-Gesten haben in der Regel ein gemeinsames Thema: eine ziehbare UI-Komponente, wie z. B. „Zum Aktualisieren ziehen“ in einer Listenansicht oder eine Seitenleiste, die von der linken Seite des Bildschirms erstellt wird.
Mit Webanimationen lässt sich ein ähnlicher Effekt ganz einfach hier im Web nachbilden – auf dem Computer oder auf dem Mobilgerät. Wenn beispielsweise eine Geste zur Steuerung von currentTime abgeschlossen wird:
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 eine „Drift“ durchführt. Diese Wiedergabe beginnt, während die Geste ausgeführt wurde, bis zum bekannten Ziel.
Das funktioniert, weil Animationen eine Priorität basierend auf ihrer Erstellungsreihenfolge haben: In diesem Fall hat driftPlayer Vorrang vor dem Player. Wenn driftPlayer abgeschlossen ist, verschwinden die Funktion und die zugehörigen Effekte. Die letzte Zeit stimmt jedoch mit der "currentTime" des zugrunde liegenden Spielers überein, sodass deine Benutzeroberfläche einheitlich bleibt.
Wenn Sie Katzenfreunde sind, gibt es eine Demo-Webanwendung, in der diese Gesten gezeigt werden. Es ist für Mobilgeräte optimiert und verwendet Polyfill für Abwärtskompatibilität. Lade es daher auf deinem Mobilgerät.
Jetzt loslegen und element.animate
Die element.animate-Methode funktioniert im Moment total – ganz gleich, ob du sie für einfache Animationen verwendest oder die zurückgegebene AnimationPlayer auf andere Weise nutzt.
Diese beiden Funktionen werden auch in anderen modernen Browsern über ein leichtes Polyfill vollständig unterstützt. Dieses Polyfill führt auch eine Funktionserkennung durch. Wenn die Browseranbieter die Spezifikation implementieren, wird diese Funktion daher mit der Zeit immer schneller und besser.
Auch die Spezifikation für Webanimationen wird weiterentwickelt. Wenn ihr die neuen Funktionen ausprobieren möchtet, könnt ihr sie jetzt auch in einem ausführlicheren Polyfill: web-animations-next verwenden.