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!

Transcript

1. Mit Animationen zum Wow-Effekt Strategien und Best-Practices für ansprechende Angular-Apps Sascha Lehmann @derLehmann_S Developer Consultant
2. Developer Consultant @ Thinktecture AG Sascha Lehmann @derLehmann_S sascha.lehmann@thinktecture.com 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
3. 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
4. Unser heutige Spielwiese https://github.com/thinktecture/angular- days-2023-fall-animations Mit Animationen zum Wow-Effekt Strategien und Best-Practices für ansprechende Angular-Apps
5. Storytime A realworld project story Mit Animationen zum Wow-Effekt Strategien und Best-Practices für ansprechende Angular-Apps
6. 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
7. 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
8. DEV Team Mit Animationen zum Wow-Effekt Strategien und Best-Practices für ansprechende Angular-Apps
9. 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
10. Der evolutionäre Einfluss Menschliches Gesichtsfeld Mit Animationen zum Wow-Effekt Strategien und Best-Practices für ansprechende Angular-Apps
11. Blindness of Change Image from https://en.wikipedia.org/wiki/Change_blindness Mit Animationen zum Wow-Effekt Strategien und Best-Practices für ansprechende Angular-Apps
12. Blindness of Change Image from https://en.wikipedia.org/wiki/Change_blindness Mit Animationen zum Wow-Effekt Strategien und Best-Practices für ansprechende Angular-Apps
13. Blindness of Change Mit Animationen zum Wow-Effekt Strategien und Best-Practices für ansprechende Angular-Apps
14. 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
15. 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
16. “Delight” macht den Unterschied Erwartungen an Applikationen Mit Animationen zum Wow-Effekt Strategien und Best-Practices für ansprechende Angular-Apps
17. 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
18. 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
19. Prinzip 1: Easing https://m3.material.io/styles/motion/easing-and-duration/applying-easing-and-duration Mit Animationen zum Wow-Effekt Strategien und Best-Practices für ansprechende Angular-Apps
20. Prinzip 2: Follow Through and Overlapping Action https://dribbble.com/shots/5414524-Ocean-scrolling-animation Mit Animationen zum Wow-Effekt Strategien und Best-Practices für ansprechende Angular-Apps
21. Prinzip 3: Squash and Stretch https://dribbble.com/shots/4815107-Follow-Accordion-Prototype Mit Animationen zum Wow-Effekt Strategien und Best-Practices für ansprechende Angular-Apps
22. Prinzip 4: Anticipation https://dribbble.com/shots/20328824-Features-Cards-Section-UI-Exploration Mit Animationen zum Wow-Effekt Strategien und Best-Practices für ansprechende Angular-Apps
23. Prinzip 5: Staging https://m3.material.io/styles/motion/transitions/transition-patterns Mit Animationen zum Wow-Effekt Strategien und Best-Practices für ansprechende Angular-Apps
24. Prinzip 6: Straight ahead action and pose to pose https://learn.toonboom.com/modules/animation-principles/topic/straight-ahead-and-pose-to-pose-principle Mit Animationen zum Wow-Effekt Strategien und Best-Practices für ansprechende Angular-Apps
25. Prinzip 7: Arcs https://m3.material.io/styles/motion/transitions/applying-transitions Mit Animationen zum Wow-Effekt Strategien und Best-Practices für ansprechende Angular-Apps
26. Prinzip 8: Secondary Action https://dribbble.com/shots/14656980-Liquid-UI-Elements Mit Animationen zum Wow-Effekt Strategien und Best-Practices für ansprechende Angular-Apps
27. Prinzip 9: Timing Mit Animationen zum Wow-Effekt Strategien und Best-Practices für ansprechende Angular-Apps
28. Prinzip 10: Exaggeration https://dribbble.com/shots/11206468--Button Mit Animationen zum Wow-Effekt Strategien und Best-Practices für ansprechende Angular-Apps
29. 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
30. 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
31. Transitions / Animations CSS Mit Animationen zum Wow-Effekt Strategien und Best-Practices für ansprechende Angular-Apps
32. 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
33. Welches soll ich verwenden?! Frameworks Greensock Mit Animationen zum Wow-Effekt Strategien und Best-Practices für ansprechende Angular-Apps
34. Beispielanwendung animieren HANDS-ON
35. 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
36. 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
37. 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
38. Pause
39. 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
40. Anwendung Template Component Angular Animations Mit Animationen zum Wow-Effekt Strategien und Best-Practices für ansprechende Angular-Apps
41. 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
42. 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
43. 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
44. 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)
45. 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
46. 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
47. 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
48. Beispielanwendung animieren HANDS-ON
49. Ein Blick … … in die Zukunft Mit Animationen zum Wow-Effekt Strategien und Best-Practices für ansprechende Angular-Apps
50. Wo ist das Problem? Mit Animationen zum Wow-Effekt Strategien und Best-Practices für ansprechende Angular-Apps
51. 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
52. 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
53. Mehrere Elemente Building Blocks Mit Animationen zum Wow-Effekt Strategien und Best-Practices für ansprechende Angular-Apps
54. Beispielanwendung animieren HANDS-ON
55. 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
56. 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
57. Sascha Lehmann sascha.lehmann@thinktecture.com Dankeschön! @derLehmann_S sascha.lehmann@thinktecture.com https://www.thinktecture.com/thinktects/sascha-lehmann/  ✉ 