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. None
  2. JÖRG NEUMANN THEMEN  Mobile Development  UI-Technologien  Consulting,

    Coaching, Training KONTAKT  Mail: Joerg.Neumann@Aclue.de  Twitter: @JoergNeumann  GitHub: https://github.com/JoergNeumann  Blog: www.HeadWriteLine.BlogSpot.com
  3. Demos https://bit.ly/2ZHBA49

  4. None
  5. DEVELOPER CHALLENGES DEVELOPER CHALLENGES

  6. DESIGN DEVELOPMENT DESIGNER / DEVELOPER WORKFLOW

  7. WEB UI DEVELOPMENT ZIELE  großartige UX entwerfen  guter

    Designer-/Entwickler-Workflow  Oberfläche mit Animationen anreichern  wiederverwendbare Komponenten
  8. 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> …
  9. 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> …
  10. 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 >
  11. 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"/>
  12. DEMO

  13. 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
  14. DEMO

  15. „Animationen machen den Screen lebendig!“  Geben Feedback zu Benutzerinteraktionen

     Lenken die Aufmerksamkeit auf ein bestimmtes Detail  Helfen beim Übergang zwischen Seiten oder Zuständen
  16. 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
  17. 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
  18. 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
  19. 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'});
  20. DEMO

  21. 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
  22. 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
  23. 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”
  24. TRANSFORMATION TYPEN  Translate  Rotate  Scale  Transform

    | Bewegen | Drehen | Größenänderung | Formänderung
  25. 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
  26. 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(); }
  27. 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
  28. DEMO

  29. 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!"); }
  30. DEMO

  31. KOMPONENTEN ORIENTIERUNG ZIELE  UI Widgets wiederverwenden  Layout, Style

    und Interaktion kapseln  Keine Beeinflussung anderer Elemente  Komponenten effizient rendern  Elemente als autonome Bausteine einbinden
  32. 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
  33. <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
  34. 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
  35. DEMO

  36. 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
  37. Q & A

  38. WEB ANIMATIONS RESOURCES SPECS & REFERENCES  W3C Spec: Web

    Animations  MDN: Using the Web Animations API  Can I Use: Browser Support von Web Animations
  39. WEB COMPONENTS RESOURCES  Polymer project  LitElement  lit-html

     Custom Elements Everywhere
  40. SVG TOOLS  SVG-Edit https://code.google.com/archive/p/svg-edit/  GSAP DrawSVGPlugin https://greensock.com/drawsvg 

    Paint Code https://www.paintcodeapp.com
  41. ANIMATION LIBRARIES SNAP.SVG  snapsvg.io D3.JS  d3js.org GSAP 

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