Web UI Feuerwerk mit SVG und der Web Animation API

Transcript

1. View Slide

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
   

   View Slide

3. Demos
   https://bit.ly/2ZHBA49
   

   View Slide

4. View Slide

5. DEVELOPER CHALLENGES
   DEVELOPER CHALLENGES
   

   View Slide

6. DESIGN DEVELOPMENT
   DESIGNER / DEVELOPER WORKFLOW
   

   View Slide

7. WEB UI DEVELOPMENT
   ZIELE
    großartige UX entwerfen
    guter Designer-/Entwickler-Workflow
    Oberfläche mit Animationen anreichern
    wiederverwendbare Komponenten
   

   View Slide

8. SVG
   DEFINITION
    Scalable Vector Graphics
    Abbildung 2-dimensionaler Vektorgrafiken
    Skalierbarkeit ohne Qualitätsverlust
    XML-basiertes Markup
    Wird von allen Browsern unterstützt
   transform="scale(1.2)">
   
   style="fill:#bfc5cc;fill-opacity:1;…"
   id="path4142-7"
   cx="80"
   cy="80"
   r="80">
   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">
   …
   

   View Slide

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
   transform="scale(1.2)">
   
   style="fill:#bfc5cc;fill-opacity:1;…"
   id="path4142-7"
   cx="80"
   cy="80"
   r="80">
   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">
   …
   

   View Slide

10. GRUNDELEMENTE
    Rechteck Ellipse Polygon Text
    Polygonzug Bild
    Linie
    Kreis
    
    
    
    
    
    
    
    SVG
    

    View Slide

11. PFADE
    M
    L
    Z
    C
    Q
    A
    move to
    line to
    close path
    curve to
    curve to (quadratic bézier)
    elliptical arc
    
    

    View Slide

12. DEMO
    

    View Slide

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
    

    View Slide

14. DEMO
    

    View Slide

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
    

    View Slide

16. CSS ANIMATIONS
    
    
    <br/>div {<br/>width: 100px;<br/>height: 100px;<br/>background-color: red;<br/>position: relative;<br/>animation-name: example;<br/>animation-duration: 4s;<br/>animation-iteration-count: 3;<br/>}<br/>@keyframes example {<br/>0% {background-color:red; left:0px; top:0px;}<br/>25% {background-color:yellow; left:200px; top:0px;}<br/>50% {background-color:blue; left:200px; top:200px;}<br/>75% {background-color:green; left:0px; top:200px;}<br/>100% {background-color:red; left:0px; top:0px;}<br/>}<br/>
    
    
    
    
    
    Synchronisation mit anderen
    Animationen schwierig
    anwendbar auf HTML und
    nur begrenzt auf SVG
    flexible Steuerung zur
    Laufzeit schwierig
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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'});
    

    View Slide

20. DEMO
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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”
    

    View Slide

24. TRANSFORMATION
    TYPEN
     Translate
     Rotate
     Scale
     Transform
    | Bewegen
    | Drehen
    | Größenänderung
    | Formänderung
    

    View Slide

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
    

    View Slide

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();
    }
    

    View Slide

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
    

    View Slide

28. DEMO
    

    View Slide

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

    View Slide

30. DEMO
    

    View Slide

31. KOMPONENTEN ORIENTIERUNG
    ZIELE
     UI Widgets wiederverwenden
     Layout, Style und Interaktion kapseln
     Keine Beeinflussung anderer Elemente
     Komponenten effizient rendern
     Elemente als autonome Bausteine einbinden
    

    View Slide

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
    

    View Slide

33. 
    
    
    
    
    
    
    
    
    ECMA Script
    Module
     Semantik
     Local Scoping
     Konfiguration
     Bundle Import
    

    View Slide

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
    

    View Slide

35. DEMO
    

    View Slide

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
    

    View Slide

37. Q & A
    

    View Slide

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

    View Slide

39. WEB COMPONENTS RESOURCES
     Polymer project
     LitElement
     lit-html
     Custom Elements Everywhere
    

    View Slide

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
    

    View Slide

41. ANIMATION LIBRARIES
    SNAP.SVG
     snapsvg.io
    D3.JS
     d3js.org
    GSAP
     greensock.com/gsap
    

    View Slide

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

    View Slide