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

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.

F8980be26d3f8c298c19e3e30ac0dbe1?s=128

Thomas Gassmann

September 22, 2020
Tweet

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

  6. None
  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).
  9. None
  10. None
  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.
  26. None
  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.
  28. None
  29. None
  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…
  44. None
  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
  47. None