Jetpack Compose — Pulsating Effect
Hello again!
So, since the Android team released Jetpack Compose first beta version, I’ve been trying my best to keep in sync with all the updates, by following the Android Dev Challenges and also by trying to reproduce my projects with it.
This time, I’ll show you how to reproduce an infinite Pulsating effect on any composable you want.
The idea of “pulsating” is pretty simple.
Something that is pulsating, keeps increasing and decreasing its size from time to time.
To decorate or change behaviours of Compose UI Elements, we can use Modifier.
The Modifier interface, has an extension function which is “scale”:
fun Modifier.scale(scale: Float)So, from here, that we already know how to change a Compose UI Element size/scale, we only need to make it keep increasing and decreasing its size from time to time with an animation.
There is a specific type of transition called InfiniteTransition, which is exactly what we are looking for.
InfiniteTransition is responsible for running child animations. Child animations can be added using InfiniteTransition.animateColor, InfiniteTransition.animateFloat, or InfiniteTransition.animateValue. Child animations will start running as soon as they enter the composition, and will not stop until they are removed from the composition.
From the possibilities to animate specified above in bold, we will use animateFloat, which will be returning a Float value on each recomposition, which is when a Compose UI Element is re-drawn.
Inside a Composable function, we can start using it in the following way:
Here, we specify that we want the variable “scale” to keep changing:
- Between the initialValue of 1f (100% of the Compose UI Element size) and the targetValue of 1.2f (120% of the size)
- Infinitely (infiniteRepeatable)
- Lasting 1000 ms (1 second) for each time it runs [tween(1000)]
- Reversing it when it reaches the end (RepeatMode.Reverse)
The final implementation will use everything that was explained before:
On the final implementation, we use a Box, which will be changing its scale according to the animation, to surround the content we want to be pulsating.
Usage:
Result:
Repository:
https://github.com/pauloaapereira/Medium_JetpackCompose_PulsatingEffect
LinkedIn:
https://www.linkedin.com/in/paulo-pereira-001615153/
Twitter:
https://twitter.com/pauloppereiraa
If you enjoyed it, and if this helped you, you can also consider paying me a coffee. :]
Thank you!
