Angular Animations – Und plötzlich ist meine App so richtig sexy!

Bei der Gestaltung moderner Webanwendungen spielen Animationen eine tragende Rolle. Animationen ermöglichen dem Benutzer eine User Experience, die ansprechend ist und die Aufmerksamkeit des Users auf die relevanten Teile leitet. Gute Benutzeroberflächen wechseln reibungslos zwischen den Zuständen mit ineinanderfliessenden Animationen. In dieser Session wird das Konzept von Animationen in Angular erklärt und wir schauen uns an, wie auch ihre App so richtig sexy wird.

Transcript

1. www.thomasgassmann.net/ @gassmannT Angular Animations – Und plötzlich ist meine App so richtig sexy! BASTA 2020 Thomas Gassmann
2. Agenda • Introduction • Structure of an animation • Animate various elements • Reusable animations.
3. Thomas Gassmann Principal Consultant, Trainer, Speaker thomas.gassmann@trivadis.com thomasgassmann.net @gassmannT
4. Creating Animations CSS Javascript
5. CSS Animations
7. CSS Animation • Limited control • Good for simple animations like showing a tooltip or toggeling an UI element • Not recommended for fine-tuned control.
8. Javascript Animation • jQuery • GSAP • Zepto • Web Animations API (WAAPI).
11. Angular Animations @angular/animations WAAPI
12. Structure of an animation
13. @angular/animations Module • trigger() • transition() • state() • animate() • stagger() • etc.
14. Angular Animations State 1 State 2 Transition background-color: blue background-color: red
15. States void Wildcard (*) Custom
16. Void State • Not part of the DOM • Element is entering the page • Element is leaving the page Add an Item: void => * Delete an Item: * => void
17. Wildcard State • Matches any animation state • Implemented with an asterix (*) • Useful for defining transitions regardless of the element’s start or end state
18. Custom State - Example accordion collapsed expanded
19. Custom State - Example
20. Custom State - Example
21. Custom State - Example
22. Custom State - Example
23. Demo
24. More complex scenarios
25. Animate multiple elements • query() finds one or more inner HTML elements • stagger() applies a cascading delay to animations for multiple elements • group() runs multiple animation steps in parallel.
27. Animate Builder • Animations can also be constructed/sequenced within a component (instead of just the metadata) • By injecting AnimationBuilder into your component • And then building an animation player.
30. Demo
31. Router Animations
32. Routing • Animating routes in Angular is much the same as querying for elements and animating them • First, setup a @routerAnimations trigger
33. Routing • Routes can be defined with animation details
34. Routing
35. Demo
36. Reusable Components
37. Reusable Animations
38. Reusable Animations • animation() function: Produces a reusable animation that can be invoked from elsewhere. Used together with useAnimation(). • useAnimation() function: Starts a reusable animation that is created using the animation() function.
39. Reusable Animations
40. Reusable Animations - useAnimation
41. Reusable Animations - animate
42. Demo
43. Recap • CSS Animations are good for simple animations • @angular/animations is a powerful framework • Animations can help to increase user experience • However, use animations carefully • Otherwise…
45. Thank you! Thomas Gassmann www.thomasgassmann.net @gassmannT thomas.gassmann@trivadis.com
46. Weitere Informationen • github.com/gassmannT/ngAnimation • thomasgassmann.net • swissangular.com • trivadis-training.com/de/training/kurse-nach-markttrends/web- development • angular-academy.ch