Spaß mit Web-Animations!

THEMEN  AI Development  Business App Development  Frontend
Technologies  Development, Consulting, Coaching, Training KONTAKT  Mail: [email protected]  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

Demos https://tinyurl.com/5475p6pt

DESIGN DEVELOPMENT DESIGNER / DEVELOPER WORKFLOW

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

„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

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"/>

SVG ANIMATIONS <svg width="140" height="140" viewBox="0 0 140 140"> <g>
<circle cx="70" cy="70" r="60" style="fill:none;" /> <circle cx="70" cy="70" r="60" fill="none" stroke="url(#gra)" stroke-width="10" /> <animateTransform attributeName="transform" begin="0s" dur="2s" type="rotate" from="0 70 70" to="360 70 70" repeatCount="indefinite" /> </g> <defs> <linearGradient id="gra"> <stop offset="0%" stop-color="#186aab" /> <stop offset="30%" stop-color="#186aab" /> <stop offset="30%" stop-color="#e2e2e2" /> <stop offset="100%" stop-color="#e2e2e2" /> </linearGradient> </defs> </svg> 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)

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

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

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

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

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

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

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

Spaß mit Web-Animations!

Spaß mit Web-Animations!

More Decks by Jörg Neumann

Other Decks in Programming

Featured

Transcript