Die Web Animations API, die erstmals in Chrome 36 zur Verfügung gestellt wurde, ermöglicht eine bequeme JavaScript-Steuerung von Animationen im Browser und wird auch in Gecko und WebKit implementiert.
In Chrome 50 werden Änderungen eingeführt, um die Interoperabilität mit anderen Browsern zu verbessern und die Compliance mit den Spezifikationen zu verbessern. Dies sind die folgenden Änderungen:
- Termine absagen
Animation.id- Statusänderung für die Methode
pause() - Gestrichelte Namen als Schlüssel in Keyframes werden eingestellt
In Chrome 51 sind einige dieser Änderungen abgeschlossen:
- Gestrichelte Namen als Schlüssel in Keyframes entfernen
Termine absagen
Die Benutzeroberfläche Animation enthält eine Methode zum Abbrechen einer Animation, auch cancel() genannt.
In Chrome 50 wird das Auslösen des Ereignisses „Cancel“ implementiert, wenn die Methode gemäß den Spezifikationen aufgerufen wird. Wenn dieses initialisiert wurde, wird die Ereignisverarbeitung über das Attribut oncancel ausgelöst.
Unterstützung für Animation.id
Wenn Sie eine Animation mit element.animate() erstellen, können Sie eine Reihe von Properties übergeben. Hier ist ein Beispiel für die Animation der Deckkraft eines Objekts:
element.animate([ { opacity: 1 }, { opacity: 0 } ], 500);
Wenn Sie das Attribut id angeben, wird es für das zurückgegebene Animation-Objekt festgelegt. Dies kann bei der Fehlerbehebung in Ihren Inhalten hilfreich sein, wenn Sie viele Animation-Objekte verarbeiten müssen. Hier ein Beispiel dafür, wie Sie ein id für eine Animation angeben, die Sie instanziieren:
element.animate([{opacity: 1}, {opacity: 0}], {duration: 500, id: "foo"});
Statusänderung für die Methode „pause()“
Die Methode pause() wird verwendet, um eine laufende Animation zu pausieren. Wenn Sie den Status der Animation mit dem Attribut playState prüfen, sollte dieser nach Aufruf der Methode paused() auf paused gesetzt werden. In Chrome-Versionen vor 50 würde das Attribut playState idle angeben, wenn die Animation noch nicht gestartet worden wäre. Jetzt zeigt sie den richtigen Status an, nämlich paused.
Gestrichelte Namen als Schlüssel in Keyframes entfernen
Zur weiteren Einhaltung der Spezifikationen und anderer Implementierungen sendet Chrome 50 eine Warnung an die Konsole, wenn gestrichelte Namen für Schlüssel in Keyframe-Animationen verwendet werden. Die richtigen Strings sind CamelCase-Namen gemäß dem Conversion-Algorithmus des CSS-Attributs zum IDL-Attribut.
Für die CSS-Eigenschaft margin-left müssten Sie beispielsweise marginLeft als Schlüssel übergeben.
In Chrome 51 werden gestrichelte Namen nicht mehr unterstützt. Daher ist jetzt ein guter Zeitpunkt, vorhandene Inhalte mit der korrekten Benennung gemäß der Spezifikation zu korrigieren.
Zusammenfassung
Diese Änderungen bringen die Implementierung von Webanimationen in Chrome näher an die Implementierungen anderer Browser heran und sind besser mit der Spezifikation konform. Dadurch wird das Erstellen von Webseiteninhalten für eine bessere Interoperabilität vereinfacht.