Bouncing and Pulsating Icon Animation In Jetpack compose

Creating Simple Bouncing and Pulsating Animation

Photo by on

Inspiration…

As I said in an , I’ll be sourcing animation ideas from and I found this icon animation to be the perfect beginner-type example to start with.

Observation…

After all the basic setup in Android Studio, I checked out the animation section for Jetpack Compose in the . If you take a look at the Source of inspiration above, you will notice a few things

  1. There are three Animated Icons.
  2. One of the Animated Icons bounce Vertically, the Second bounce Horizontally while the last one Pulsate
  3. The Animation Never Ends (i.e. it runs infinitely)

Fortunately, there is an API described in the Android documentation that enables the creation of , unless they are removed. Now let's get our hands dirty

The Code…

Vertically Bouncing Icon

The codes will be divided into sections, and each section will be explained below…

 val infiniteTransition = rememberInfiniteTransition()
@Composable
private fun VerticalBouncingAnimation(infiniteTransition: InfiniteTransition
) {
//1
// start and end color for icon
val startColor = Color.Green
val endColor = Color.Black
//2
val animatedColor by infiniteTransition.animateColor(
initialValue = startColor,
targetValue = endColor,
animationSpec = infiniteRepeatable(
tween(800, easing = FastOutLinearInEasing),
RepeatMode.Reverse,
)
)
//3
val position by infiniteTransition.animateFloat(
initialValue = -50f,
targetValue = 50f,
animationSpec = infiniteRepeatable(tween(1000), RepeatMode.Reverse)
)
//4
Icon(
Icons.Default.Favorite,
tint = animatedColor,
contentDescription = "Heart Icon",_
modifier = Modifier
.size(50.dp)
.offset(y = position.dp)
)
  1. The first section is where we defined the colour we will use for the icon Tint
  2. This is where we animate the colors for the icon, although this isn’t what we want to accomplish, just an added step, and we will animate the icon color by using the extension method (animateColor) provided by the Infinite Transition class, animateColor method take three parameters
  • initialValue = initial state that the icon color should be (i.e. StartColor)
  • targetValue = targeted state for our object (the color we want the icon to animate to)
  • animationSpec = this is where we provide our animation type and the repeat mode using the infiniteRepeatable method.

3. This third section is where we animate the icon position using the extension method (animateFloat) and it also takes three parameters as animateColor and the bouncing effect is achieved using the tween animation method, and you can tweak the animation effect by adjusting the values

4. The last part is the icon that is animated; this is just a normal icon that the animation effect will be applied to. (The animated color will be applied to the Tint parameter, while the bouncing effect will be applied to the icon’s Modifier Offset method on the Y axis) and that’s all for vertical animation.

Horizontally Bouncing Icon…

@Composable
private fun HorizontalBouncingIcon(infiniteTransition: InfiniteTransition) {
//1
val startColor = Color.Green
val endColor = Color.Black
//2
val animatedColor by infiniteTransition.animateColor(
initialValue = startColor,
targetValue = endColor,
animationSpec = infiniteRepeatable(
tween(800, easing = FastOutLinearInEasing),
RepeatMode.Reverse,
)
)
//3
val position by infiniteTransition.animateFloat(
initialValue = -60f,
targetValue = 60f,
animationSpec = infiniteRepeatable(
animation = tween(
800,
easing = FastOutLinearInEasing
),
repeatMode = RepeatMode.Reverse
)
)
//4
Icon(
imageVector = Icons.Default.Favorite,
contentDescription = "Hear icon",
tint = animatedColor,
modifier = Modifier
.size(50.dp)
.offset(x = position.dp)
)
}

This is exactly like the previous animation, just a little tweak on the values that doesn’t affect the outcome much, but the only section that has changes that should be noted is the fourth section.

  1. On the icon’s Modifier Offset, instead of applying the animating effect on the Y axis we apply it on the X axis and that should do the trick

Pulsating Icon…

@Composable
private fun PulsatingHeartIcon(infiniteTransition: InfiniteTransition) {
//1
val pulsate by infiniteTransition.animateFloat(
initialValue = 10f,
targetValue = 60f,
animationSpec = infiniteRepeatable(tween(1200), RepeatMode.Reverse)
)
//2
Icon(
imageVector = Icons.Default.Favorite,
contentDescription = "",
modifier = Modifier
.size(pulsate.dp)
.offset(
x = 10.dp, y = 10.dp
)
)
}
  1. The first section is the same as we did with the other; we give it an initial value, targeted value and the animation spec
  2. In this section, you will notice that we didn’t add the animation effect to the offset this time around, but we added it to the icon size provided by the Icon modifier and gave the x and y-axis on the modifier offset the value of 10.DP.

Conclusion…

Because I’m just staring out with animation, this approach may not be the best approach and there are a lot of rooms for improvement. As I improve along the line, I’ll come back and update this code samples.

Thank you for sticking by, if this helped in any way clap for this article and give me a follow

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Raheem Hameed

Native Android developer | Mobile Developer, I write about problems I solve and help other developers avoid them.