Komplexe Oberflächen mit SVG und der Web Animation API

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Demos https://bit.ly/2ZHBA49

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

DEVELOPER CHALLENGES DEVELOPER CHALLENGES

Slide 6

Slide 6 text

DESIGN DEVELOPMENT DESIGNER / DEVELOPER WORKFLOW

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

SVG DEFINITION  Scalable Vector Graphics  Abbildung 2-dimensionaler Vektorgrafiken  Skalierbarkeit ohne Qualitätsverlust  XML-basiertes Markup  Wird von allen Browsern unterstützt …

Slide 9

Slide 9 text

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 …

Slide 10

Slide 10 text

GRUNDELEMENTE Rechteck Ellipse Polygon Text Polygonzug Bild Linie Kreis SVG

Slide 11

Slide 11 text

PFADE M L Z C Q A move to line to close path curve to curve to (quadratic bézier) elliptical arc

Slide 12

Slide 12 text

DEMO

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

DEMO

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

CSS ANIMATIONS 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;} }

Synchronisation mit anderen Animationen schwierig anwendbar auf HTML und nur begrenzt auf SVG flexible Steuerung zur Laufzeit schwierig

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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'});

Slide 20

Slide 20 text

DEMO

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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”

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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(); }

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

DEMO

Slide 29

Slide 29 text

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!"); }

Slide 30

Slide 30 text

DEMO

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

ECMA Script Module  Semantik  Local Scoping  Konfiguration  Bundle Import

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

DEMO

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

Q & A

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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