Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

Spaß mit Web-Animations!

Spaß mit Web-Animations!

Jörg Neumann

September 19, 2024
Tweet

More Decks by Jörg Neumann

Other Decks in Programming

Transcript

  1. 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
  2. WEB UX DEVELOPMENT ZIELE  großartige UX entwerfen  guter

    Designer-/Entwickler-Workflow  Oberfläche mit Animationen anreichern  Performant auf allen Plattformen
  3. „Animationen machen den Screen lebendig!“  Geben Feedback zu Benutzerinteraktionen

     Lenken die Aufmerksamkeit auf ein bestimmtes Detail  Helfen beim Übergang zwischen Seiten oder Zuständen
  4. 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
  5. 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> …
  6. 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> …
  7. 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 >
  8. 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"/>
  9. 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)
  10. 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
  11. 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
  12. WEB ANIMATIONS API DEFINITION  Animationen per JavaScript erstellen und

    steuern  Basiert auf CSS Animation und CSS Transitions BROWSER SUPPORT
  13. 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'});
  14. 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
  15. 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
  16. 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”
  17. TRANSFORMATION TYPEN  Translate  Rotate  Scale  Transform

    | Bewegen | Drehen | Größenänderung | Formänderung
  18. 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
  19. 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(); }
  20. 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
  21. 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!"); }
  22. ANIMATION LIBRARIES & TOOLS SNAP.SVG  snapsvg.io D3.JS  d3js.org

    GSAP  greensock.com/gsap SVGATOR  https://www.svgator.com
  23. 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
  24. WEB ANIMATIONS RESOURCES SPECS & REFERENCES  W3C Spec: Web

    Animations  MDN: Using the Web Animations API  Can I Use: Browser Support von Web Animations