The basic idea behind implementing a slot-machine animation, is running a slide-up/down animation for consecutive digits (3 to 4, 7 to 8 etc.) and upon completion, replace those with the next set of consecutive digits and continue with the animation. Repeat this until you reach the target digit.
If target is 7 starting from 4:
animate(4, 5) -> animate(5, 6) -> animate(6, 7)
Setting the current iteration’sfrom
value, to the previous iteration’s to
value, will give the impression of continuity across multiple animations.
Let’s take a look at an individual animation loop.
[1] The current from
value would be the floor of currentSlotValue
.
[2] Animating from
to to
is done using transition()
as discussed in the Neomorph Button example. To calculate the incremental increase (delta) we subtract the floor value of currentSlotValue
from its actual value.
[3] Next we define the underlying @Composable Text()
y-offset value based on this incremental delta.
[4] This is the@Composable Text()
for each of the digit infrom
value. It has an initial y-offset of 0.dp
.
[5] This is the@Composable Text()
for the digit of the correspondingto
value (which is from + 1
).
Also to keep in mind that, afrom
value ending with 9 will have itsto
value ending with a 0.
Depending on the preferred direction of scroll, its initial y-offset of is set beyond the height of the current @Composable
(in this case +50.dp
).
Let’s combine these individual animation loops into a single from
to to
animation as we’d discussed earlier. This part would be rather simple to understand since we’ve already discussed about transition()
in the Neomorphic button example.
[1] We’ve two states, from
being state(0) and to
being state(1). As we’ve decided to ‘animate’ between two digits, we need to use Float
for granularity purposes.
Since from
can be less than to
or vice versa, the current implementation would mean, that the animation direction could reverse based on the values passed.
[2] We use a tween()
AnimationSpec with a duration of 300ms per animation loop set dynamically over the entire duration of from
to to
.
But currently the animation reverses?
As mentioned above and also in the example screenshot at the beginning of this article, we see the direction of animation reversing when from > to
. How do we avoid this reversing and preserve a set direction of the animation?
All we have to do is, simply consider this case as an overflow over 9 and add 10
to the to
value. For, example, if from = 5, to = 4
, it would effectively mean from = 5, to = 14
.
And inside @Composable SlotText()
, set the current
to the last digit from the overflowed value.
Hopefully that made sense 😅
And that concludes my short snippet on implementing a Slot machine scroll animation using Jetpack Compose.
My implementation may not be the most optimised or perfect, but hopefully it could help you with few references to Compose implementations.
I’m documenting all my snippets at a single place. Check out Jetpack Compose over a Cup of Hot Chocolate ☕️