SVG Visualisierung von Daten in Form von Charts, Diagrammen, … Entwicklung komplexer UI Komponenten Enthält auch ein Animations- und ein Interaktionsmodell
von Animationen (CSS Transitions, CSS Animations, SVG Animation) Animationen per Script erzeugen und steuern Effizienter als window.requestAnimationFrame(), $.animate() und co. Hardware Accelerated Keine Abhängigkeit zu Frameworks erforderlich
in Millisekunden Direction: Richtung (normal, reverse, alternate, alternate-reverse) Duration: Anzahl an Millisekunden bis zum Ende der Iteration Easing: Funktion (linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier) endDelay: Verzögerung am Ende der Animation Fill: wann der Effekt angewandt wird (backwards, forwards, both, none) iterationStart: Wann soll die Iteration starten? Iterations: Anzahl der Wiederholungen oder “Infinity”
Animation Animation.cancel() unterbricht die Animation Animation.reverse() wechselt die Richtung der Animation GESCHWINDIGKEIT STEUERN Animation.playbackRate steuert die Ablaufgeschwindigkeit, wobei 1 Normalgeschwindigkeit darstellt
HTML TEMPLATES UI-Vorlage für eine Komponente SHADOW DOM Kapselung der inneren DOM- Bestandteile eines Elements ES MODULES Einbinden von Komponenten WEB COMPONENTS
Das richtige Tooling ist entscheidend Animationen macht die UI lebendig Die Web Animations API hilft Oberflächen in Komponenten denken und entwickeln