Komplexe Oberflächen mit SVG und der Web Animation API

THEMEN  AI  Frontend Technologies  Mobile Development 
Consulting, Coaching, Training KONTAKT  Mail: [email protected]  Twitter: @JoergNeumann  Web: www.neogeeks.de JÖRG NEUMANN Founder & CEO NeoGeeks GmbH Azure OpenAI Service, Azure Machine Learning Platform

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

Komplexe Oberflächen mit SVG und der Web Animat...

Komplexe Oberflächen mit SVG und der Web Animation API

More Decks by Jörg Neumann

Other Decks in Programming

Featured

Transcript