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

Slide 1

Slide 1 text

Mit Animationen zum Wow-Effekt Strategien und Best-Practices für ansprechende Angular-Apps Sascha Lehmann @derLehmann_S Developer Consultant

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Storytime A realworld project story Mit Animationen zum Wow-Effekt Strategien und Best-Practices für ansprechende Angular-Apps

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Der evolutionäre Einfluss Menschliches Gesichtsfeld Mit Animationen zum Wow-Effekt Strategien und Best-Practices für ansprechende Angular-Apps

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

“Delight” macht den Unterschied Erwartungen an Applikationen Mit Animationen zum Wow-Effekt Strategien und Best-Practices für ansprechende Angular-Apps

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Prinzip 10: Exaggeration https://dribbble.com/shots/11206468--Button Mit Animationen zum Wow-Effekt Strategien und Best-Practices für ansprechende Angular-Apps

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Transitions / Animations CSS Mit Animationen zum Wow-Effekt Strategien und Best-Practices für ansprechende Angular-Apps

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Welches soll ich verwenden?! Frameworks Greensock Mit Animationen zum Wow-Effekt Strategien und Best-Practices für ansprechende Angular-Apps

Slide 34

Slide 34 text

Beispielanwendung animieren HANDS-ON

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

Pause

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

Anwendung Template Component Angular Animations Mit Animationen zum Wow-Effekt Strategien und Best-Practices für ansprechende Angular-Apps

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

Route-Animations Angular Animations Mit Animationen zum Wow-Effekt Strategien und Best-Practices für ansprechende Angular-Apps • Brauchen Wrapper um • 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)

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

Beispielanwendung animieren HANDS-ON

Slide 49

Slide 49 text

Ein Blick … … in die Zukunft Mit Animationen zum Wow-Effekt Strategien und Best-Practices für ansprechende Angular-Apps

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

Mehrere Elemente Building Blocks Mit Animationen zum Wow-Effekt Strategien und Best-Practices für ansprechende Angular-Apps

Slide 54

Slide 54 text

Beispielanwendung animieren HANDS-ON

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

Sascha Lehmann [email protected] Dankeschön! @derLehmann_S [email protected] https://www.thinktecture.com/thinktects/sascha-lehmann/  ✉ 