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
   

   View Slide

2. Agenda
   • Introduction
   • Structure of an animation
   • Animate various elements
   • Reusable animations.
   

   View Slide

3. Thomas Gassmann
   Principal Consultant,
   Trainer, Speaker
   thomas.gassmann@trivadis.com
   thomasgassmann.net
   @gassmannT
   

   View Slide

4. Creating Animations
   CSS Javascript
   

   View Slide

5. CSS Animations
   

   View Slide

6. View Slide

7. CSS Animation
   • Limited control
   • Good for simple animations like showing a tooltip or toggeling an UI
   element
   • Not recommended for fine-tuned control.
   

   View Slide

8. Javascript Animation
   • jQuery
   • GSAP
   • Zepto
   • Web Animations API (WAAPI).
   

   View Slide

9. View Slide

10. View Slide

11. Angular Animations
    @angular/animations
    WAAPI
    

    View Slide

12. Structure of an animation
    

    View Slide

13. @angular/animations Module
    • trigger()
    • transition()
    • state()
    • animate()
    • stagger()
    • etc.
    

    View Slide

14. Angular Animations
    State 1 State 2
    Transition
    background-color: blue background-color: red
    

    View Slide

15. States
    void Wildcard (*) Custom
    

    View Slide

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
    

    View Slide

17. Wildcard State
    • Matches any animation state
    • Implemented with an asterix (*)
    • Useful for defining transitions regardless of the element’s start or end
    state
    

    View Slide

18. Custom State - Example
    accordion collapsed
    expanded
    

    View Slide

19. Custom State - Example
    

    View Slide

20. Custom State - Example
    

    View Slide

21. Custom State - Example
    

    View Slide

22. Custom State - Example
    

    View Slide

23. Demo
    

    View Slide

24. More complex scenarios
    

    View Slide

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.
    

    View Slide

26. View Slide

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.
    

    View Slide

28. View Slide

29. View Slide

30. Demo
    

    View Slide

31. Router Animations
    

    View Slide

32. Routing
    • Animating routes in Angular is much the same as querying for elements
    and animating them
    • First, setup a @routerAnimations trigger
    

    View Slide

33. Routing
    • Routes can be defined with animation details
    

    View Slide

34. Routing
    

    View Slide

35. Demo
    

    View Slide

36. Reusable Components
    

    View Slide

37. Reusable Animations
    

    View Slide

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.
    

    View Slide

39. Reusable Animations
    

    View Slide

40. Reusable Animations - useAnimation
    

    View Slide

41. Reusable Animations - animate
    

    View Slide

42. Demo
    

    View Slide

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…
    

    View Slide

44. View Slide

45. Thank you!
    Thomas Gassmann
    www.thomasgassmann.net
    @gassmannT
    thomas.gassmann@trivadis.com
    

    View Slide

46. Weitere Informationen
    • github.com/gassmannT/ngAnimation
    • thomasgassmann.net
    • swissangular.com
    • trivadis-training.com/de/training/kurse-nach-markttrends/web-
    development
    • angular-academy.ch
    

    View Slide

47. View Slide