Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web UI Feuerwerk mit SVG und der Web Animation API

Jörg Neumann
September 15, 2022

Web UI Feuerwerk mit SVG und der Web Animation API

Jörg Neumann

September 15, 2022
Tweet

More Decks by Jörg Neumann

Other Decks in Programming

Transcript

  1. JÖRG NEUMANN THEMEN  Mobile Development  UI-Technologien  Consulting,

    Coaching, Training KONTAKT  Mail: [email protected]  Twitter: @JoergNeumann  GitHub: https://github.com/JoergNeumann  Blog: www.HeadWriteLine.BlogSpot.com
  2. WEB UI DEVELOPMENT ZIELE  großartige UX entwerfen  guter

    Designer-/Entwickler-Workflow  Oberfläche mit Animationen anreichern  wiederverwendbare Komponenten
  3. 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> …
  4. 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> …
  5. 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 >
  6. 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"/>
  7. 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
  8. „Animationen machen den Screen lebendig!“  Geben Feedback zu Benutzerinteraktionen

     Lenken die Aufmerksamkeit auf ein bestimmtes Detail  Helfen beim Übergang zwischen Seiten oder Zuständen
  9. 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
  10. 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
  11. 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
  12. 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'});
  13. 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
  14. 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
  15. 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”
  16. TRANSFORMATION TYPEN  Translate  Rotate  Scale  Transform

    | Bewegen | Drehen | Größenänderung | Formänderung
  17. 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
  18. 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(); }
  19. 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
  20. 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!"); }
  21. KOMPONENTEN ORIENTIERUNG ZIELE  UI Widgets wiederverwenden  Layout, Style

    und Interaktion kapseln  Keine Beeinflussung anderer Elemente  Komponenten effizient rendern  Elemente als autonome Bausteine einbinden
  22. 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
  23. <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
  24. 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
  25. 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
  26. WEB ANIMATIONS RESOURCES SPECS & REFERENCES  W3C Spec: Web

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