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.

Transcript

1. Web-Apps mit Angular Animationen als letzten Schliff für 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  ✉  Web-Apps mit Angular Animationen als letzten Schliff für Angular-Apps
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
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
5. Grundlagen Tech- Stacks Angular Animations Tipps & Debugging Resume Agenda Web-Apps mit Angular Animationen als letzten Schliff für Angular-Apps
6. Der evolutionäre Einfluss Menschliches Gesichtsfeld Web-Apps mit Angular Animationen als letzten Schliff für Angular-Apps
9. Experiment Erwischt :-P Web-Apps mit Angular Animationen als letzten Schliff für Angular-Apps
10. Blindness of Change Image from https://en.wikipedia.org/wiki/Change_blindness Web-Apps mit Angular Animationen als letzten Schliff für Angular-Apps
11. Blindness of Change Image from https://en.wikipedia.org/wiki/Change_blindness Web-Apps mit Angular Animationen als letzten Schliff für Angular-Apps
12. Blindness of Change Web-Apps mit Angular Animationen als letzten Schliff für Angular-Apps
13. 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
14. 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/
15. “Delight” macht den Unterschied Erwartungen an Applikationen Web-Apps mit Angular Animationen als letzten Schliff für Angular-Apps
16. 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
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 Web-Apps mit Angular Animationen als letzten Schliff für Angular-Apps 12 Prinzipien der Animation ⭐ ⭐ ⭐ 2 2 3
18. 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
19. 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
20. 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
21. Prinzip 5: Staging Web-Apps mit Angular Animationen als letzten Schliff für Angular-Apps https://m3.material.io/styles/motion/transitions/transition-patterns
22. Prinzip 8: Secondary Action Web-Apps mit Angular Animationen als letzten Schliff für Angular-Apps https://dribbble.com/shots/14656980-Liquid-UI-Elements
23. Prinzip 9: Timing Web-Apps mit Angular Animationen als letzten Schliff für Angular-Apps https://dribbble.com/shots/14656980-Liquid-UI-Elements
24. Grundlagen Tech- Stacks Angular Animations Tipps & Debugging Resume Agenda Web-Apps mit Angular Animationen als letzten Schliff für Angular-Apps
25. 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
26. Transitions / Animations CSS Web-Apps mit Angular Animationen als letzten Schliff für Angular-Apps
27. 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
28. Welches soll ich verwenden?! Frameworks Web-Apps mit Angular Animationen als letzten Schliff für Angular-Apps Greensock
29. Grundlagen Tech- Stacks Angular Animations Tipps & Debugging Resume Agenda Web-Apps mit Angular Animationen als letzten Schliff für Angular-Apps
30. 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
31. Anwendung Template Component Angular Animations Web-Apps mit Angular Animationen als letzten Schliff für Angular-Apps
32. Domain Specific Language (DSL) • trigger() • state() • transition() • style() • animate() Angular Animations Web-Apps mit Angular Animationen als letzten Schliff für Angular-Apps
33. 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
34. 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
35. Beispielanwendung animieren DEMO Web-Apps mit Angular Animationen als letzten Schliff für Angular-Apps
36. 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
37. Grundlagen Tech- Stacks Angular Animations Tipps & Debugging Resume Agenda Web-Apps mit Angular Animationen als letzten Schliff für Angular-Apps
38. 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 • …
39. 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
40. Browser-Tools nutzen Animationen Debuggen DEMO Web-Apps mit Angular Animationen als letzten Schliff für Angular-Apps
41. Grundlagen Tech- Stacks Angular Animations Tipps & Debugging Resume Agenda Web-Apps mit Angular Animationen als letzten Schliff für Angular-Apps
42. • 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
43. Sascha Lehmann sascha.lehmann@thinktecture.com Dankeschön! Nächstes Webinar https://www.thinktecture.com/karriere/