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

Web UI Feuerwerk mit SVG und der Web Animation API

Web UI Feuerwerk mit SVG und der Web Animation API

32ae0ae04b5c4f1b29ee9e8826823fbc?s=128

Jörg Neumann

February 18, 2021
Tweet

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