After the Animation basics the next natural step would be to create more complex transition animations. Litho provides several APIs to customize many aspects of the transitions and how different components can be animated together.
Synchronising transitions objects can be done by wrapping them in one of the following animations sets:
stagger. This transition sets can be nested within each other, e.g. you can have a stagger of parallel animation sets.
Example using a
stagger set to animate 3 different rectangles.
Sequences and staggers also support interrupting behavior, trying to preserve the guarantee that a component will never jump and will always end up in the correct final position.
We can also use this sets to animate different properties of the same component, like in the following example.
Animators affect the rate in which we push new values to the animating components. An
Animator can be added to any transition by using
.animator() builder setting.
We provide two animators (spring based
SpringTransitionAnimator and a general timing-based
TimingTransitionAnimator) that can be configured to cover most use cases. It is also possible to add a custom by implementing
By default, all transitions in Litho run by
SpringTransitionAnimator which is physics based and naturally interruptible. You can tune the parameters of this spring by creating another
Transition.springWith() and pass custom tension and friction. . On the other hand,
TimingTransitionAnimator provides more customisation as we can set a total time and an
Interpolator. To do this we provide an easy builder
Transition.timing() that received the total time and an optional
TimingTransitionAnimator default interpolator is an
AccelerateDecelerateInterpolator so keep in mind that adding this animator to only a few transitions in a set (like the example below) could create unwanted behavior.
A listener can be added to receive a callback when an individual transition has ended. This is done through the Litho event dispatcher. See Events overview.
TransitionEndEvent will be called with the transition key and the specific
AnimatedProperty that has been animated for that key. If multiple
AnimatedPropertys are added to the same transition, and all of them run at the same time, a callback will be excecuted for each one of those.
In many cases this callback may be useful to loop animations by updating the tree. Many examples can be found in the Litho Sample app:
You can also add the transition end handler to the
Transition.allLayout() and the same logic applies.