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

Mit Animationen zum Wow-Effekt: Strategien und Best-Practices für ansprechende Angular-Apps

Sascha Lehmann
October 20, 2023
18

Mit Animationen zum Wow-Effekt: Strategien und Best-Practices für ansprechende Angular-Apps

Animationen gehören neben einem ansprechenden Design zu den wichtigsten Erfolgsfaktoren einer gelungenen User Experience. Der Trend geht hin zu immer mehr Animationen, sodass das Wissen um die Basistechnologien immer mehr an Bedeutung gewinnt.

In diesem Workshop zeigt Ihnen Sascha Lehmann von Thinktecture, wie Sie Ihre Angular-Projekte effektiv auf Animationsanforderungen vorbereiten und wie Sie mit Hilfe von CSS- und Angular-Animations komplexe Animations-Orchestrierungen vornehmen können. Außerdem werfen wir mit der View Transition API einen Blick in die Zukunft der Webanimationen. Damit verleihen Sie Ihrer Angular-App den letzten Schliff!

Sascha Lehmann

October 20, 2023
Tweet

Transcript

  1. Developer Consultant @ Thinktecture AG Sascha Lehmann @derLehmann_S [email protected] https://www.thinktecture.com/thinktects/sascha-lehmann/

    Spezialisierung: Angular und UI/UX  ✉  Mit Animationen zum Wow-Effekt Strategien und Best-Practices für ansprechende Angular-Apps
  2. Unsere Ziele für heute   📔 Sinn & Zweck

    von Animationen verstehen Technische möglichkeiten im Angular-Umfeld kennen Tech-Basics & Best-Practices Mit Animationen zum Wow-Effekt Strategien und Best-Practices für ansprechende Angular-Apps
  3. Storytime A realworld project story Mit Animationen zum Wow-Effekt Strategien

    und Best-Practices für ansprechende Angular-Apps
  4. DEV Team Product Owner Wie wär’s noch mit ein paar

    Animationen? Mit Animationen zum Wow-Effekt Strategien und Best-Practices für ansprechende Angular-Apps
  5. DEV Team Product Owner Wie wär’s noch mit ein paar

    Animationen? Mit Animationen zum Wow-Effekt Strategien und Best-Practices für ansprechende Angular-Apps
  6. ANIMATIONS “Zu zeitaufwändig!” “Verursachen nur Performanceprobleme!” “Sind einfach unnötig” “Haben

    keinen wesentlichen Mehrwert" “Verursachen zu viel Boilerplate-Code” Mit Animationen zum Wow-Effekt Strategien und Best-Practices für ansprechende Angular-Apps
  7. Lenken den Fokus Helfen ein Mentales Modell aufzubauen Kommunizieren State

    Change Verhindern Desorientierung Sorgen für ”Vergnügen” Aufgaben von Animationen in der UX   ↻   Mit Animationen zum Wow-Effekt Strategien und Best-Practices für ansprechende Angular-Apps
  8. Arron Walter’s Hierachy of User Needs Erwartungen an Applikationen Pleasurable

    Usable Reliable Functional • UI / UX Experte • Autor “Design for Emotion” • Speaker • Consultant Mehr Infos: https://www.aarronwalter.com/ Mit Animationen zum Wow-Effekt Strategien und Best-Practices für ansprechende Angular-Apps
  9. “Delight” macht den Unterschied Erwartungen an Applikationen Mit Animationen zum

    Wow-Effekt Strategien und Best-Practices für ansprechende Angular-Apps
  10. 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 12 Prinzipien der Animation Mit Animationen zum Wow-Effekt Strategien und Best-Practices für ansprechende Angular-Apps
  11. 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 12 Prinzipien der Animation ⭐ ⭐ ⭐ 2 2 3 Mit Animationen zum Wow-Effekt Strategien und Best-Practices für ansprechende Angular-Apps
  12. Prinzip 11 + 12: Solid drawing & appeal • Einheitliches

    & ansprechendes Design • Designgrundlagen • Durchgängiges Konzept • Design System Mit Animationen zum Wow-Effekt Strategien und Best-Practices für ansprechende Angular-Apps
  13. 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 Mit Animationen zum Wow-Effekt Strategien und Best-Practices für ansprechende Angular-Apps
  14. 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 Mit Animationen zum Wow-Effekt Strategien und Best-Practices für ansprechende Angular-Apps
  15. Welches soll ich verwenden?! Frameworks Greensock Mit Animationen zum Wow-Effekt

    Strategien und Best-Practices für ansprechende Angular-Apps
  16. Style Layout Paint Composite Browser Rendering Pipeline • 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 • … Mit Animationen zum Wow-Effekt Strategien und Best-Practices für ansprechende Angular-Apps
  17. 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? Mit Animationen zum Wow-Effekt Strategien und Best-Practices für ansprechende Angular-Apps
  18. Atomare Bestandteile von Animationen Transitions Easings Durations Lassen sich sehr

    gut in Form von Tokens abbilden Ideal mit Mixins oder Factory Funktionen abbildbar Mit Animationen zum Wow-Effekt Strategien und Best-Practices für ansprechende Angular-Apps
  19. 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 Mit Animationen zum Wow-Effekt Strategien und Best-Practices für ansprechende Angular-Apps
  20. Domain Specific Language (DSL) • trigger() • state() • transition()

    • style() • animate() Angular Animations Mit Animationen zum Wow-Effekt Strategien und Best-Practices für ansprechende Angular-Apps
  21. 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 Mit Animationen zum Wow-Effekt Strategien und Best-Practices für ansprechende Angular-Apps
  22. 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 Mit Animationen zum Wow-Effekt Strategien und Best-Practices für ansprechende Angular-Apps
  23. Route-Animations Angular Animations Mit Animationen zum Wow-Effekt Strategien und Best-Practices

    für ansprechende Angular-Apps • Brauchen Wrapper um <router-outlet> • Braucht den aktuellen State des Outlets, damit wir wissen wann wir die Animation starten müssen • Während der Animation haben wir zugriff auf die alte Seite (:leave) und die neue Seite (:enter)
  24. Route-Animations Angular Animations Mit Animationen zum Wow-Effekt Strategien und Best-Practices

    für ansprechende Angular-Apps • Während der Animation haben wir zugriff auf die alte Seite (:leave) und die neue Seite (:enter) • Deshalb müssen wir um diese besser Stylen zu können zunächst einen kleinen “reset” machen
  25. Route-Animations Angular Animations Mit Animationen zum Wow-Effekt Strategien und Best-Practices

    für ansprechende Angular-Apps • Möchten wir für bestimmte Routen, bestimmte Animationen abspielen, so müssen wir diese identifizierbar machen
  26. Route-Animations Angular Animations Mit Animationen zum Wow-Effekt Strategien und Best-Practices

    für ansprechende Angular-Apps • Anschließend müssen wir unserer Animation diese State Bezeichnungen übergeben • Dazu müssen wir die PreparaRoute Funktion noch einmal etwas anpassen
  27. Ein Blick … … in die Zukunft Mit Animationen zum

    Wow-Effekt Strategien und Best-Practices für ansprechende Angular-Apps
  28. Wo ist das Problem? Mit Animationen zum Wow-Effekt Strategien und

    Best-Practices für ansprechende Angular-Apps
  29. Wie funktiontioniert’s? • Screenshot des aktuellen Page-States • Callbackfunktion ausführen

    (Rendering wird pausiert) • Nach DOM-changes neuer Screenshot des neuen Page-States • Pseudo-DOM-Tree wird erstellt Building Blocks Mit Animationen zum Wow-Effekt Strategien und Best-Practices für ansprechende Angular-Apps
  30. Pseudo DOM Tree • Neuer Top-Layer • Standardanimation: Cross-fade •

    Wird nach Animation wieder zerstört Building Blocks Mit Animationen zum Wow-Effekt Strategien und Best-Practices für ansprechende Angular-Apps
  31. Design Systems Survey 2022 Was steckt in unseren Design Systems

    https://designsystemssurvey.seesparkbox.com/2022/#section-2 Mit Animationen zum Wow-Effekt Strategien und Best-Practices für ansprechende Angular-Apps
  32. Sequenz • Slide-In-Left • Group 1. Zoom-In 2. Fade-In •

    Stagger-Fade-In Dokumentation 1 3 2 1 2 1 2 1 2 2 1 1 2 3 1 2 Mit Animationen zum Wow-Effekt Strategien und Best-Practices für ansprechende Angular-Apps