Chapter 13. Transitions with Rx
In this chapter
- Creating animated UIs with Rx and view models
- Creating parametrized transitions
- Understanding where the line should be between the view and the view model
This chapter shows some rather technical possibilities of reactive programming. It has a reasonable amount of mathematics, but it’s all explained, so hang tight.
In UIs, you often have in-between states, in which, for example, a drop-down isn’t quite open, but “opening.” You animate it from close to open.
;%22/%3E%3C/svg%3E)
There are a few approaches to animations, and you’ll take a short tour before you start.
In the simple case of an animation being relatively fast (less than 300 ms), you can start an animation and let it finish no matter what the user does. We call this fire and forget. It’s easy and indeed the typical way of animating UIs.
;%22/%3E%3C/svg%3E)
The fire-and-forget approach has limitations, and they become more pronounced the longer the animations become.
The most obvious problem appears when you think of a user who impatiently clicks rapidly many times. If the user clicks before the animation has finished, what should happen?
Forgetting the animation state after it’s started works for short animations. For slightly longer ones, it makes the UI perform a glitch if the user is too fast—or if the application state changes because of external reasons, such as an incoming notification.