Web UI Feuerwerk mit SVG und der Web Animation API

JÖRG NEUMANN THEMEN  Mobile Development  UI-Technologien  Consulting,
Coaching, Training KONTAKT  Mail: Joerg.Neumann@Aclue.de  Twitter: @JoergNeumann  GitHub: https://github.com/JoergNeumann  Blog: www.HeadWriteLine.BlogSpot.com

Demos https://bit.ly/2ZHBA49

DEVELOPER CHALLENGES DEVELOPER CHALLENGES

DESIGN DEVELOPMENT DESIGNER / DEVELOPER WORKFLOW

WEB UI DEVELOPMENT ZIELE  großartige UX entwerfen  guter
Designer-/Entwickler-Workflow  Oberfläche mit Animationen anreichern  wiederverwendbare Komponenten

SVG DEFINITION  Scalable Vector Graphics  Abbildung 2-dimensionaler Vektorgrafiken
 Skalierbarkeit ohne Qualitätsverlust  XML-basiertes Markup  Wird von allen Browsern unterstützt <svg id="svg" width="210" height="210" transform="scale(1.2)"> <g id="layer1"> <circle style="fill:#bfc5cc;fill-opacity:1;…" id="path4142-7" cx="80" cy="80" r="80"></g> <path style="fill:#ffffff;fill-opacity:1;…" type="arc" cx="80" cy="80" rx="65" ry="65" start="2.7246043" end="0.40454034" d="M 20.569666,106.32557 A 65,65 0 0 1…" open="true"></path> …

SVG VORTEILE  Hat eine klare Semantik  Erstellung geometrischer
Formen  Grafischer Effekte (SVG Filter Effects, Typografie, Animation, Transparency Masks, …)  Dynamische Image-Erstellung  Export aus Grafik-Tools möglich <svg id="svg" width="210" height="210" transform="scale(1.2)"> <g id="layer1"> <circle style="fill:#bfc5cc;fill-opacity:1;…" id="path4142-7" cx="80" cy="80" r="80"></g> <path style="fill:#ffffff;fill-opacity:1;…" type="arc" cx="80" cy="80" rx="65" ry="65" start="2.7246043" end="0.40454034" d="M 20.569666,106.32557 A 65,65 0 0 1…" open="true"></path> …

GRUNDELEMENTE Rechteck Ellipse Polygon Text Polygonzug Bild Linie Kreis <rect
x="10" y="10" width="10" height="10" /> <circle cx="10" cy="10" r="10" /> <ellipse cx="10" cy="10" rx="10" ry="5" /> <line x1="10" y1="10" x2="50" y2="100" /> <polygon points="10,10 20,20 30,30 20,20 10,10" /> <polyline points="10,10 20,20 30,30 20,20 10,10" /> <image width="10" height="10" xlink:href="image.png" /> <Text x="10" y="10" font-size="10">SVG</Text >

PFADE M L Z C Q A move to line
to close path curve to curve to (quadratic bézier) elliptical arc <path d="M 100 100 L 300 100 L 200 300 z"/>

D3 DEFINITION  Library zur effizienten Erzeugung und Manipulation von
SVG  Visualisierung von Daten in Form von Charts, Diagrammen, …  Entwicklung komplexer UI Komponenten  Enthält auch ein Animations- und ein Interaktionsmodell

„Animationen machen den Screen lebendig!“  Geben Feedback zu Benutzerinteraktionen
 Lenken die Aufmerksamkeit auf ein bestimmtes Detail  Helfen beim Übergang zwischen Seiten oder Zuständen

CSS ANIMATIONS <html> <head> <style> div { width: 100px; height:
100px; background-color: red; position: relative; animation-name: example; animation-duration: 4s; animation-iteration-count: 3; } @keyframes example { 0% {background-color:red; left:0px; top:0px;} 25% {background-color:yellow; left:200px; top:0px;} 50% {background-color:blue; left:200px; top:200px;} 75% {background-color:green; left:0px; top:200px;} 100% {background-color:red; left:0px; top:0px;} } </style> </head> <body> <div></div> </body> </html> Synchronisation mit anderen Animationen schwierig anwendbar auf HTML und nur begrenzt auf SVG flexible Steuerung zur Laufzeit schwierig

WEB ANIMATIONS API DEFINTION  Ein einheitliches Modell zur Steuerung
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

WEB ANIMATIONS API DEFINITION  Animationen per JavaScript erstellen und
steuern  Basiert auf CSS Animation und CSS Transitions BROWSER SUPPORT  Firefox 48+  Chrome 36+  Safari: 13.1+ / 13.5+  Polyfill verfügbar

WEB ANIMATIONS API var animation = element.animate(keyframes, options); SYNTAX ball.animate([
{ opacity: 1, backgroundColor: 'green' }, { opacity: 0, backgroundColor: 'red' } ], 2000); BEISPIEL ball.animate([ { opacity: 1, backgroundColor: 'green' }, { opacity: 0, backgroundColor: 'red' } ], { duration: 2000, fill: 'forwards', iterations: '3', easing: 'ease-in'});

KEYFRAMES STEUERN element.animate([ { opacity: 1, offset: 1 }, {
opacity: 0.5, offset: 0.3 } ], { opacity: 0, offset: 1 } ], 2000); EXPLIZITE OFFSETS element.animate([ { opacity: 1, easing: 'ease-out' }, { opacity: 0.5, easing: 'ease-in' } ], { opacity: 1 } ], 2000); EASING

ANIMATION STEUERN element.animate([ { opacity: 1, offset: 1 }, {
opacity: 0.5, offset: 0.3 } ], { opacity: 0, offset: 1 } ], { duration: 1000, iterations: '2', direction: 'alternate', easing: 'ease-in' }); WEITERE OPTIONEN

EFFECT TIMING OPTIONS ATTRIBUTE  Delay: Verzögerung bis zum Start
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”

TRANSFORMATION TYPEN  Translate  Rotate  Scale  Transform
| Bewegen | Drehen | Größenänderung | Formänderung

TRANSFORMATIONEN ball.animate([ { transform: 'translateX(0%) translateY(0%) rotate(0deg)' }, { transform:
'translateX(1000%) translateY(100%) rotate(360deg)' }, ], { duration: 1000, iterations: '2', direction: 'alternate', easing: 'ease-in' }); BEISPIEL

ANIMATIONEN GLOBAL DEFINIEREN var ballKeyframes = new KeyframeEffect( ball, [
{ transform: 'translateX(0%) translateY(0%) rotate(0deg)' }, { transform: 'translateX(1000%) translateY(100%) rotate(360deg)' }, ], { duration: 1000, fill: 'forwards', iterations: '2', direction: 'alternate'} ); BEISPIEL var ballAnimation = new Animation(ballKeyframes, document.timeline); function clickHandler(event) { ballAnimation.play(); }

WEITERE FUNKTIONEN ANIMATION STEUERN  Animation.finish() geht zum Ende der
Animation  Animation.cancel() unterbricht die Animation  Animation.reverse() wechselt die Richtung der Animation GESCHWINDIGKEIT STEUERN  Animation.playbackRate steuert die Ablaufgeschwindigkeit, wobei 1 Normalgeschwindigkeit darstellt

CALLBACKS AND PROMISES HANDLER  onFinish(): Handler für Finish Event
 onCancel(): Handler für Cancel Event function startAnimation() { ballAnimation.onfinish = finishAnimation; ballAnimation.play(); } function finishAnimation(event) { alert("Finish!"); }

KOMPONENTEN ORIENTIERUNG ZIELE  UI Widgets wiederverwenden  Layout, Style
und Interaktion kapseln  Keine Beeinflussung anderer Elemente  Komponenten effizient rendern  Elemente als autonome Bausteine einbinden

CUSTOM ELEMENTS Eine API zur Registrierung von eigenen HTML Elementen
HTML TEMPLATES UI-Vorlage für eine Komponente SHADOW DOM Kapselung der inneren DOM- Bestandteile eines Elements ES MODULES Einbinden von Komponenten WEB COMPONENTS

<html> <head> <script type="module" src="radialpicker.js"></script> </head> <body> <radial-picker value="1" minimum="1"
maximum="1"> </radial-picker> </body> </html> ECMA Script Module  Semantik  Local Scoping  Konfiguration  Bundle Import

POLYMER PROJECT LitElement  Basisklasse zur Entwicklung von leichtgewichtigen Web
Components  bietet ein reaktives Programmiermodell lit-html  sehr effiziente HTML Templating Library  basiert auf ES Template String

FAZIT Lessons learned  Bei komplexen UI Widgets hilft SVG
 Das richtige Tooling ist entscheidend  Animationen macht die UI lebendig  Die Web Animations API hilft  Oberflächen in Komponenten denken und entwickeln

WEB ANIMATIONS RESOURCES SPECS & REFERENCES  W3C Spec: Web
Animations  MDN: Using the Web Animations API  Can I Use: Browser Support von Web Animations

WEB COMPONENTS RESOURCES  Polymer project  LitElement  lit-html
 Custom Elements Everywhere

SVG TOOLS  SVG-Edit https://code.google.com/archive/p/svg-edit/  GSAP DrawSVGPlugin https://greensock.com/drawsvg 
Paint Code https://www.paintcodeapp.com

ANIMATION LIBRARIES SNAP.SVG  snapsvg.io D3.JS  d3js.org GSAP 
greensock.com/gsap

ANIMATION TOOLS  GSAP Morph SVG https://greensock.com/morphsvg  Drama https://www.drama.app

Web UI Feuerwerk mit SVG und der Web Animation API

Web UI Feuerwerk mit SVG und der Web Animation API

More Decks by Jörg Neumann

Other Decks in Programming

Featured

Transcript