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

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

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

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

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

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

No content

No content

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

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

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

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

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

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/

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 • …

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

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

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

• 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

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