Guten Tag, Freunde!Web-APIs werden ständig weiterentwickelt. Einige von ihnen, wie z. B. Console oder Canvas, werden von allen Browsern gut unterstützt, andere befinden sich noch in der Entwicklung.Eine der in der Entwicklung befindlichen APIs ist die Web Animations API oder WAAPI. Trotz der Tatsache, dass die erste Version der Spezifikation im Jahr 2012 veröffentlicht wurde und die API selbst erstmals 2014 in den Browsern Firefox und Chrome implementiert wurde, habe ich kürzlich davon erfahren (ich habe auch noch nie davon gehört - ca. Per.).Entwickler können mit JavaScript mit CSS-Animationen arbeiten. Die Syntax ähnelt der Syntax herkömmlicher CSS-Animationen, verfügt jedoch über einige Funktionen, die Entwicklern das Erstellen und Ändern von Animationen erleichtern.Schauen wir uns diese API anhand eines einfachen Beispiels an.Unten sehen wir ein rotierendes Quadrat, dessen Farbe sich mit jeder Umdrehung ändert.
CSS könnte folgendermaßen aussehen:#cube {
width: 40px;
height: 40px;
margin: 50%;
background-color: pink;
animation: rotateCube 1s infinite;
}
@keyframes rotateCube {
0% {
transform: rotate(0deg);
}
30% {
background-color: purple;
}
100% {
transform: rotate(180deg);
}
}
Machen Sie jetzt dasselbe mit WAAPI.Animation erstellen
Alles beginnt mit der Erstellung eines Keyframes-Objekts, das Informationen enthält, die denen in der @ keyframes-Direktive unseres CSS ähneln:let cubeRotating = [
{transform: 'rotate(0deg)', backgroundColor: 'pink'},
{backgroundColor: 'purple', offset: 0.3},
{transform: 'rotate(180deg)', backgroundColor: 'pink'}
]
Wir sehen zwei Hauptunterschiede:- Wir müssen backgroundColor zu anderen Schritten hinzufügen.
- Wir müssen nicht die Zeit, um jeden Schritt abzuschließen, als Prozentsatz bestimmen.
WAAPI teilt die Animation automatisch durch die Anzahl der Tasten in gleiche Teile, sodass sich in unserem Fall die Hintergrundfarbe um etwa die Hälfte der Animation ändert.Wir möchten jedoch, dass dies um 30% geschieht, daher fügen wir im zweiten Schritt die Offset-Eigenschaft mit einem Wert von 0,3 hinzu.Eines ist zu beachten: Ein Keyframes-Objekt muss mindestens zwei Schlüssel haben. Andernfalls wird ein NotSupportedError ausgelöst.Als Nächstes wird ein Objekt erstellt, das Animationseigenschaften enthält, die für die Dauer und Anzahl der Wiederholungen verantwortlich sind:let cubeTiming = {
duration: 1000,
iterations: Infinity
}
Die Dauer der Animation wird in Millisekunden festgelegt.Anstelle von "unendlich" verwenden wir das Schlüsselwort "unendlich".Zum Ausführen der Animation verwenden wir schließlich die Element.animate-Methode:document.getElementById('cube').animate(
cubeRotating,
cubeTiming
)
Es gibt mehrere weitere Syntaxoptionen. Beispiele finden Sie hier .Aber das ist nicht alles. Tatsache ist, dass wir mit WAAPI die Wiedergabe von Animationen steuern können!Steuerung der Animationswiedergabe
Durch Aufrufen der Animationsmethode wird die Animation sofort gestartet, dies ist jedoch nicht immer das, was wir wollen. Daher können wir die Pausen- und Wiedergabemethoden aufrufen, um die Animation zu stoppen bzw. zu starten:let cubeAnimation = document.getElementById('cube').animate(
cubeRotating,
cubeTiming
)
cubeAnimation.pause()
document.body.onclick = () => cubeAnimation.play()
In unserem Beispiel arbeiten wir mit einer Animation, aber Sie können der Seite mehrere „Animationen“ hinzufügen und diese nach Ihren Wünschen verwalten.Unter den verfügbaren WAAPI-Methoden gibt es auch Finish-, Cancel- und Reverse-Methoden.Wir können auch die Wiedergabegeschwindigkeit der Animation steuern:let cubeAnimation = document.getElementById('cube').animate(
cubeRotating,
cubeTiming
)
document.body.onclick = () => cubeAnimation.playbackRate *= 1.5
Dieser Code bewirkt, dass sich das Quadrat beim Klicken schneller dreht.
Bisher haben wir gelernt, wie man eine Animation erstellt und deren Wiedergabe steuert. Eine weitere WAAPI-Funktion ist der gleichzeitige Zugriff auf alle Animationen.Verwalten Sie mehrere Animationen
WAAPI verfügt über eine getAnimations-Methode, mit der Sie auf alle erstellten Animationen zugreifen können.Angenommen, wir möchten alle Animationen auf der Seite verlangsamen, wenn der Benutzer die Option "Reduzierte Bewegung bevorzugen" aktiviert hat (die CSS-Medienfunktion "Reduzierte Bewegung bevorzugen" kann verwendet werden, um zu bestimmen, ob der Benutzer das Betriebssystem aufgefordert hat, die Anzahl der verwendeten Animationen oder Bewegungen zu minimieren - ca. pro.):const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)')
if(mediaQuery.matches){
document.getAnimations().forEach(animation => {
animation.playbackRate *= 0.5
})
}
Im obigen Beispiel suchen wir nach der Medienfunktion, die eine reduzierte Bewegung bevorzugt, und wenn ihr Wert reduziert ist, erhalten wir alle Animationen auf der Seite und reduzieren ihre Wiedergabegeschwindigkeit um die Hälfte.Dies ist eines der Dinge, die WAAPI sehr nützlich machen. Wir können Änderungen an mehreren Animationen vornehmen, indem wir eine Eigenschaft ändern.Abhängigkeiten
Ein weiteres interessantes Merkmal von WAAPI ist die Fähigkeit, die Abhängigkeit der Eigenschaften einer Animation von den Eigenschaften einer anderen zu bestimmen.Wenn wir beispielsweise zwei Quadrate haben und möchten, dass sich das zweite doppelt so schnell dreht wie das erste, können wir dies auf zwei Arten tun.Erster Weg:let cube1Animation = document.getElementById('cube').animate(
cubeRotating,
{
duration: 1000,
iterations: Infinity
}
)
let cube2Animation = document.getElementById('cube2').animate(
cubeRotating,
{
duration: 500,
iterations: Infinity
}
)
Die Animationszeit des ersten Quadrats beträgt 1 Sekunde, die Sekunde - 500 Millisekunden.Bei diesem Ansatz müssen wir jedoch dasselbe für das zweite Quadrat tun, wenn wir die Animationszeit des ersten Quadrats ändern.Stellen Sie sich vor, wie schwierig es wird, wenn es viele Animationen oder eine große Anzahl animierter Objekte gibt?Der beste Weg, um unser Problem zu lösen, besteht darin, die Abhängigkeit der Drehung des zweiten Quadrats vom ersten zu bestimmen:let cube1Animation = document.getElementById('cube').animate(
cubeRotating,
{
duration: 1000,
iterations: Infinity
}
)
let cube2Animation = document.getElementById('cube2').animate(
cubeRotating,
{
duration: cube1Animation.effect.timing.duration / 2,
iterations: Infinity
}
)
Daher verwenden wir die Animationszeit des ersten Quadrats, um die Animationszeit des zweiten Quadrats zu bestimmen. Wenn Sie nun die Animationszeit des ersten Quadrats ändern, dreht sich das zweite immer doppelt so schnell!
Performance
Apropos Leistung: Ich habe keinen großen Unterschied zwischen CSS und WAAPI festgestellt. Dies kann jedoch an der Einfachheit meines Beispiels liegen.Ein wichtiger Vorteil von WAAPI gegenüber anderen Methoden zum Erstellen von Animationen in JS besteht darin, dass es in einem separaten Thread ausgeführt wird, sodass der Hauptthread die Animation "vergessen" und den Rest des Codes ausführen kann.Browser-Unterstützung
WAAPI befindet sich derzeit im Entwurfsstatus und wird teilweise in neueren Versionen von Firefox und Chrome sowie in den wichtigsten mobilen Browsern unterstützt.Teilweise Unterstützung bedeutet, dass Browser Methoden wie Wiedergabe, Pause, Umkehren, Beenden und Wiedergaberate unterstützen, getAnimations jedoch nicht unterstützen. In allen Browsern
gibt es ein Polyphil für WAAPI.Das ist alles für mich!Weiterführende Literatur:Verwenden derWebanimations-API Beispiele für Webanimations-APIGroßartige Serie „Lassen Sie uns über die Webanimations-API sprechen“ von Dan WilsonVielen Dank für Ihre Aufmerksamkeit.