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

Web-Apps mit Angular: Animationen als letzten Schliff für Angular-Apps

Web-Apps mit Angular: Animationen als letzten Schliff für Angular-Apps

Im zweiten Webinar unserer Reihe „Moderne Web-Apps mit Angular“ dreht sich alles rund um das Thema Animationen. Gerne werden sie in Projekten als “nice to have”, unnötig oder Zeitfresser abgetan – jedoch zu Unrecht.

In diesem Webinar räumt Sascha Lehmann mit gängigen Vorurteilen auf. Er zeigt, wie Animationen grundsätzlich funktionieren, warum sie für eine gute User Experience unabdingbar sind und wie man seiner Applikation mithilfe von CSS-Animationen und Angular-Animations den letzten Schliff verleiht.

Außerdem gibt es nebenbei wichtige Tipps aus der Praxis, etwa wann es sinnvoll ist, Animation-Libraries wie “gsap” oder “lottie” einzusetzen und was beim Aufbau der Anwendung beachtet werden muss, um Animations-Frust zu vermeiden.

Sascha Lehmann

March 08, 2023
Tweet

More Decks by Sascha Lehmann

Other Decks in Programming

Transcript

  1. Web-Apps mit Angular
    Animationen als letzten Schliff
    für Angular-Apps
    Sascha Lehmann
    @derLehmann_S
    Developer Consultant

    View full-size slide

  2. Developer Consultant @ Thinktecture AG
    Sascha Lehmann
    @derLehmann_S
    [email protected]
    https://www.thinktecture.com/thinktects/sascha-lehmann/
    Spezialisierung: Angular und UI/UX



    Web-Apps mit Angular
    Animationen als letzten Schliff für Angular-Apps

    View full-size slide

  3. 22. Februar– 05. April 2023
    Angular-Web-Apps Webinar-Reihe
    Alle Webinare unserer Web-
    App-Reihe finden Sie hier:
    thinktecture.com/
    angular-web-apps/
    Web-Apps mit Angular
    Animationen als letzten Schliff für Angular-Apps

    View full-size slide

  4. ANIMATIONS
    “Zu zeitaufwändig!”
    “Verursachen nur
    Performanceprobleme!”
    “Sind einfach unnötig”
    “Haben keinen
    wesentlichen Mehrwert"
    “Verursachen zu viel
    Boilerplate-Code”
    Web-Apps mit Angular
    Animationen als letzten Schliff für Angular-Apps

    View full-size slide

  5. Grundlagen
    Tech-
    Stacks
    Angular
    Animations
    Tipps &
    Debugging
    Resume
    Agenda
    Web-Apps mit Angular
    Animationen als letzten Schliff für Angular-Apps

    View full-size slide

  6. Der evolutionäre Einfluss
    Menschliches Gesichtsfeld
    Web-Apps mit Angular
    Animationen als letzten Schliff für Angular-Apps

    View full-size slide

  7. Experiment Erwischt :-P
    Web-Apps mit Angular
    Animationen als letzten Schliff für Angular-Apps

    View full-size slide

  8. Blindness of Change
    Image from https://en.wikipedia.org/wiki/Change_blindness
    Web-Apps mit Angular
    Animationen als letzten Schliff für Angular-Apps

    View full-size slide

  9. Blindness of Change
    Image from https://en.wikipedia.org/wiki/Change_blindness
    Web-Apps mit Angular
    Animationen als letzten Schliff für Angular-Apps

    View full-size slide

  10. Blindness of Change
    Web-Apps mit Angular
    Animationen als letzten Schliff für Angular-Apps

    View full-size slide

  11. Lenken den Fokus
    Helfen ein Mentales
    Modell aufzubauen
    Kommunizieren
    State Change
    Verhindern
    Desorientierung
    Sorgen für
    ”Vergnügen”
    Aufgaben von Animationen in der UX
      ↻
     
    Web-Apps mit Angular
    Animationen als letzten Schliff für Angular-Apps

    View full-size slide

  12. Arron Walter’s Hierachy of User Needs
    Erwartungen an Applikationen
    Web-Apps mit Angular
    Animationen als letzten Schliff für Angular-Apps
    Pleasurable
    Usable
    Reliable
    Functional
    • UI / UX Experte
    • Autor
    “Design for Emotion”
    • Speaker
    • Consultant
    Mehr Infos: https://www.aarronwalter.com/

    View full-size slide

  13. “Delight” macht den Unterschied
    Erwartungen an Applikationen
    Web-Apps mit Angular
    Animationen als letzten Schliff für Angular-Apps

    View full-size slide

  14. Easing
    Follow Through and
    Overlapping Action
    Squash and
    Stretch
    Anticipation Staging
    Straight ahead
    action and pose to
    pose
    Arcs
    Secondary Action Timing
    Exaggeration
    Solid drawing
    Appeal
    Web-Apps mit Angular
    Animationen als letzten Schliff für Angular-Apps
    12 Prinzipien der Animation

    View full-size slide

  15. Easing
    Follow Through and
    Overlapping Action
    Squash and
    Stretch
    Anticipation Staging
    Straight ahead
    action and pose to
    pose
    Arcs
    Secondary Action Timing
    Exaggeration
    Solid drawing
    Appeal
    Web-Apps mit Angular
    Animationen als letzten Schliff für Angular-Apps
    12 Prinzipien der Animation



    2 2
    3

    View full-size slide

  16. Prinzip 1: Easing
    Web-Apps mit Angular
    Animationen als letzten Schliff für Angular-Apps
    https://m3.material.io/styles/motion/easing-and-duration/applying-easing-and-duration

    View full-size slide

  17. Prinzip 3: Squash and Stretch
    Web-Apps mit Angular
    Animationen als letzten Schliff für Angular-Apps
    https://dribbble.com/shots/4815107-Follow-Accordion-Prototype

    View full-size slide

  18. Prinzip 4: Anticipation
    Web-Apps mit Angular
    Animationen als letzten Schliff für Angular-Apps
    https://dribbble.com/shots/20328824-Features-Cards-Section-UI-Exploration

    View full-size slide

  19. Prinzip 5: Staging
    Web-Apps mit Angular
    Animationen als letzten Schliff für Angular-Apps
    https://m3.material.io/styles/motion/transitions/transition-patterns

    View full-size slide

  20. Prinzip 8: Secondary Action
    Web-Apps mit Angular
    Animationen als letzten Schliff für Angular-Apps
    https://dribbble.com/shots/14656980-Liquid-UI-Elements

    View full-size slide

  21. Prinzip 9: Timing
    Web-Apps mit Angular
    Animationen als letzten Schliff für Angular-Apps
    https://dribbble.com/shots/14656980-Liquid-UI-Elements

    View full-size slide

  22. Grundlagen
    Tech-
    Stacks
    Angular
    Animations
    Tipps &
    Debugging
    Resume
    Agenda
    Web-Apps mit Angular
    Animationen als letzten Schliff für Angular-Apps

    View full-size slide

  23. Web-Apps mit Angular
    Animationen als letzten Schliff für Angular-Apps
    CSS
    Web
    Animations
    API
    Frameworks
    Die Möglichkeiten
    Animieren im Web
    • Sehr mächtig
    • Abstraktionsebene (DSL)
    • Ggf. ”Schwergewichtig”
    • Flexibler
    • Mehr Kontrolle
    • Komplexere Orchestrierung
    • Basic
    • Einfach anzuwenden
    • Leichtgewichtig

    View full-size slide

  24. Transitions / Animations
    CSS
    Web-Apps mit Angular
    Animationen als letzten Schliff für Angular-Apps

    View full-size slide

  25. Direktzugriff auf den Browser
    • Grundlage von CSS Transitions und
    Animations
    • API ermöglicht es Animationen in
    JavaScript zu schreiben
    • Verwendet Browserspezifische
    Animationsimplementierung
    à Browser optimiert selbst
    • Dynamisches setzen von Werten möglich
    Web Animations API
    Web-Apps mit Angular
    Animationen als letzten Schliff für Angular-Apps

    View full-size slide

  26. Welches soll ich verwenden?!
    Frameworks
    Web-Apps mit Angular
    Animationen als letzten Schliff für Angular-Apps
    Greensock

    View full-size slide

  27. Grundlagen
    Tech-
    Stacks
    Angular
    Animations
    Tipps &
    Debugging
    Resume
    Agenda
    Web-Apps mit Angular
    Animationen als letzten Schliff für Angular-Apps

    View full-size slide

  28. Voraussetzungen
    • @angular/animations – Package ist
    installiert
    • Import des BrowserAnimationModule
    • Basiert auf Web Animations API
    (Fallback auf CSS Keyframes)
    • CSS-like Performance + Flexibilität von
    JavaScript
    Angular Animations
    Web-Apps mit Angular
    Animationen als letzten Schliff für Angular-Apps

    View full-size slide

  29. Anwendung
    Template Component
    Angular Animations
    Web-Apps mit Angular
    Animationen als letzten Schliff für Angular-Apps

    View full-size slide

  30. Domain Specific Language (DSL)
    • trigger()
    • state()
    • transition()
    • style()
    • animate()
    Angular Animations
    Web-Apps mit Angular
    Animationen als letzten Schliff für Angular-Apps

    View full-size slide

  31. Vordefinierte States
    • * (Wildcard)
    • void – (Für Elemente die dem DOM hinzugefügt werden oder verlassen)
    • * => * - (“Any-State“ Selektor)
    Aliasse
    • void => * à :enter
    • * => void à :leave
    • :increment
    • :decrement
    Angular Animations
    Web-Apps mit Angular
    Animationen als letzten Schliff für Angular-Apps

    View full-size slide

  32. Orchestrierung
    • query()
    Zum auswählen bestimmter Kindelemente
    • group()
    Mehrere Animationen parallel ausführen
    • sequenze()
    Mehrere Animationen nacheinander ausführen
    • stagger()
    Kaskadierende Verzögerung auf Elemente anwenden
    Angular Animations
    Web-Apps mit Angular
    Animationen als letzten Schliff für Angular-Apps

    View full-size slide

  33. Beispielanwendung animieren
    DEMO
    Web-Apps mit Angular
    Animationen als letzten Schliff für Angular-Apps

    View full-size slide

  34. My Best Practices
    • CSS Transitions / Animations mit Klassen anwenden
    • Ganze Trigger oder Animationsbestandteile in File(s) auslagern
    • AnimationReferenzeMetadata
    • Factory-Functions verwenden
    • Direktiven mit Animation-Player erstellen
    Reusing Animations
    Web-Apps mit Angular
    Animationen als letzten Schliff für Angular-Apps

    View full-size slide

  35. Grundlagen
    Tech-
    Stacks
    Angular
    Animations
    Tipps &
    Debugging
    Resume
    Agenda
    Web-Apps mit Angular
    Animationen als letzten Schliff für Angular-Apps

    View full-size slide

  36. Style Layout Paint Composite
    Browser Rendering Pipeline
    Web-Apps mit Angular
    Animationen als letzten Schliff für Angular-Apps
    • Alles was mit CSS und Animationen zu tun hat läuft in einem separaten
    Compositor Thread
    • Blockt NICHT den Hauptthread …
    • … allerdings sind Layout und Paint, Aufgabe des Main Thread
    • Parsing
    • Cascade
    • …
    • Platz
    Berechnung
    • Beinflussung
    • …
    • Colors
    • Images
    • Borders
    • …
    • opacity
    • transform
    • …

    View full-size slide

  37. Welche eher vermeiden?
    • Die beste Performance wird mit
    Properties erzielt die nur den Composition
    Step beinflussen
    • transform
    • translate
    • scale
    • skew
    • rotate
    • opacity
    • Im Optimalfall vermeiden was Layout und
    Paint Steps betriff
    • width
    • height
    • position
    • color
    • shadows
    • background-image
    Welche Properties sollte ich animieren?
    Web-Apps mit Angular
    Animationen als letzten Schliff für Angular-Apps

    View full-size slide

  38. Browser-Tools nutzen
    Animationen Debuggen
    DEMO
    Web-Apps mit Angular
    Animationen als letzten Schliff für Angular-Apps

    View full-size slide

  39. Grundlagen
    Tech-
    Stacks
    Angular
    Animations
    Tipps &
    Debugging
    Resume
    Agenda
    Web-Apps mit Angular
    Animationen als letzten Schliff für Angular-Apps

    View full-size slide

  40. • Animationen NICHT zum Schluss
    bedenken, sondern von Anfangan mit
    einbeziehen
    • Animationen Sind wichtig um
    Applikationen lebensechter zu gestalten
    • Animationen mit Sinn und Verstand
    einseten
    • Pinzipien beachten
    • Konsistenz
    • Mit Erfahrungs steigern
    • So einfach wie möglich, so komplex wie
    nötig
    • Möglichst vermeiden Properties zu
    animieren die LAYOUT und PAINT Zyklus
    des Browsers betreffen
    Resume
    Web-Apps mit Angular
    Animationen als letzten Schliff für Angular-Apps

    View full-size slide

  41. Sascha Lehmann
    [email protected]
    Dankeschön!
    Nächstes Webinar
    https://www.thinktecture.com/karriere/

    View full-size slide