Zusammenfassung

  • Der erste öffentliche W3C-Entwurf vom Juni 2013 schlug ein gemeinsames Zeit- und Wirkungsmodell für CSS-Übergänge, CSS-Animationen und SVG-Animationen vor.
  • Der Entwurf von 2014 verband es mit einer Skriptschnittstelle für Animationen, die danach der Browser ausführt. Der Text von 2023 beschreibt aktuelle Zeit, Pause, Umkehr, Abschluss und Abbruch ausführlich.

Hinter der Bühne laufen drei Stoppuhren. Ein Übergang schiebt die Grafik herein, Keyframes drehen ein Zeichen, SVG bewegt eine Linie. Die Leserin möchte den Moment noch einmal sehen, in dem die Linie einen Knoten erreicht. Die Redaktion müsste dafür drei verschiedene Zeitangaben zusammenbringen. Man könnte jedem bewegten Teil einen JavaScript-Timer zuweisen und jedes Zwischenbild selbst berechnen. Dann wären die Leute, die etwas erklären wollten, plötzlich als Uhrmacher für ihre eigenen Diagramme angestellt.

Der erste öffentliche Entwurf vom 25. Juni 2013 beschrieb das strukturelle Problem: CSS Transitions, CSS Animations und SVG erzeugen Bewegung mit ähnlichen Fähigkeiten, erläutern sie jedoch in unterschiedlichen Begriffen. Web Animations schlug ein abstraktes Modell für die Gemeinsamkeiten vor. Eine Zeitachse liefert einen Zeitpunkt, ein Effekt berechnet einen Zwischenwert, und mehrere Effekte können zusammenwirken. Die Geschichte, die eine Seite erzählen will, bleibt ihre Entscheidung. Die Uhr benötigt dennoch eine gemeinsame Sprache.

Der Entwurf vom 5. Juni 2014 erklärte Modell und Programmierschnittstelle nebeneinander. Ein Skript kann eine Animation erzeugen; nach ihrer Erzeugung führt der User Agent sie aus. Das ist eine andere Arbeitsteilung als eine Rückruffunktion, die jedes Bild selbst malt. Das Dokument ordnete auch requestAnimationFrame ein und beschrieb passende Zeitwerte sowie die Reihenfolge der Ausführung. Der Browser übernimmt das Laufwerk; die Seite kann Start und Bedienung bestimmen.

Eine Pausentaste ist besonders wertvoll, wenn Bewegung etwas erklärt. Die Leserin hält einen Netzwerkpfad an, um die Beschriftung zu lesen. Ein Dozent spult zurück, damit man die Herkunft eines Signals versteht. Wenn „welcher Zeitpunkt ist jetzt?“ eine verlässliche Antwort hat, lässt sich der entscheidende Zwischenzustand erneut zeigen. Die Seite muss dafür nicht für jede CSS- und SVG-Technik eine andere Uhr erfinden.

Der Level-1-Entwurf vom 11. Oktober 2018 hielt die Rollen von Zeitachse, Animationsobjekt und Effekt auseinander. Der Effekt sagt, was sich ändert. Die Zeitachse liefert Fortschritt. Der Wiedergabestatus beschreibt, ob etwas wartet, läuft, pausiert oder fertig ist. Wer Tempo und Richtung verändert, muss nicht die Zeichnung für jedes Bild neu formulieren. Die Rückspultaste funktioniert, weil „jetzt“ im Modell einen Ort hat.

Im Entwurf vom 5. Juni 2023 ist das Bedienpult genau beschrieben: aktuelle Zeit und Startzeit setzen, spielen, pausieren, abschließen, abbrechen, Geschwindigkeit ändern und umkehren. Der Text regelt auch Zustände und Zusagen für Bereitschaft und Ende. Eine Pause kann angefordert werden, bevor die Bewegung wirklich begonnen hat oder während sie gerade ausläuft. Der Browser muss dann eine gültige Zustandsänderung und das richtige Bild bestimmen. Ein Knopf auf der Seite mag mühelos aussehen; die Uhr dahinter darf nicht raten.

Die W3C-Veröffentlichungsgeschichte verzeichnet Entwürfe von 2013, 2014, 2018 und 2023. Ihr roter Faden ist das gemeinsame Zeitmodell für verschiedene Animationsfamilien und eine Steuerung durch Skript. Der spätere Gedanke, Scrollfortschritt als Zeitquelle einzusetzen, gehört zu einem anderen Kapitel. Hier entscheidet die Redaktion, welches Bild eine Erklärung verdient und wann die Lesenden es anhalten können. Der Browser hält die Uhr zusammen; drei Bühnenarbeiter dürfen ihre drei Stoppuhren einpacken.