Spaß mit Web-Animations!

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

THEMEN  AI Development  Business App Development  Frontend Technologies  Development, Consulting, Coaching, Training KONTAKT  Mail: joerg.neumann@neogeeks.de  LinkedIn: www.linkedin.com/in/jörgneumann  X: @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://tinyurl.com/5475p6pt

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

DESIGN DEVELOPMENT DESIGNER / DEVELOPER WORKFLOW

Slide 6

Slide 6 text

WEB UX DEVELOPMENT ZIELE  großartige UX entwerfen  guter Designer-/Entwickler-Workflow  Oberfläche mit Animationen anreichern  Performant auf allen Plattformen

Slide 7

Slide 7 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 8

Slide 8 text

DEMO

Slide 9

Slide 9 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 10

Slide 10 text

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

Slide 11

Slide 11 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 12

Slide 12 text

GRUNDELEMENTE Rechteck Ellipse Polygon Text Polygonzug Bild Linie Kreis SVG

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

DEMO

Slide 15

Slide 15 text

SVG ANIMATIONS Funktioniert nur mit SVG- und nicht mit HTML-Elementen SVG kann auch per CSS animiert werden (aber nur rudimentär) Es können auch Pfade animiert werden (Morphing möglich)

Slide 16

Slide 16 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 17

Slide 17 text

DEMO

Slide 18

Slide 18 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 19

Slide 19 text

WEB ANIMATIONS API DEFINITION  Animationen per JavaScript erstellen und steuern  Basiert auf CSS Animation und CSS Transitions BROWSER SUPPORT

Slide 20

Slide 20 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 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

ANIMATION LIBRARIES & TOOLS SNAP.SVG  snapsvg.io D3.JS  d3js.org GSAP  greensock.com/gsap SVGATOR  https://www.svgator.com

Slide 31

Slide 31 text

DEMO

Slide 32

Slide 32 text

FAZIT Lessons learned  Animationen machen Frontends lebendig  CSS ist nicht immer die optimal  Bei komplexen UI Widgets hilft SVG  Das richtige Tooling ist entscheidend  Die Web Animations API hilft

Slide 33

Slide 33 text

Q & A

Slide 34

Slide 34 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 35

Slide 35 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 36

Slide 36 text

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

Slide 37

Slide 37 text

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