Hi guys, Is there any similar <library> for pulse animation in jetpack-compose? Any article how to b...

# compose-android

[KotlinLeaner]

Hi guys, Is there any similar library for pulse animation in jetpack-compose? Any article how to build in compose?

[Oleksandr Balan]

I would simply draw it on Canvas with a modifier.

Somethink like this could be a starting point:

fun Modifier.pulse(
    color: Color = Color.Magenta,
    count: Int = 3,
    duration: Int = 5_000,
    easing: Easing = LinearEasing,
): Modifier = composed {
    val transition = rememberInfiniteTransition()

    val progress = List(count) {
        transition.animateFloat(
            initialValue = 0f,
            targetValue = 1f,
            animationSpec = InfiniteRepeatableSpec(
                animation = tween(
                    durationMillis = duration,
                    easing = easing
                ),
                initialStartOffset = StartOffset(it * duration / count),
                repeatMode = RepeatMode.Restart,
            )
        )
    }

    drawBehind {
        val radius = min(size.width, size.height) / 2f

        progress.forEach {
            drawCircle(
                color = color.copy(alpha = 1f - it.value),
                radius = radius * it.value
            )
        }
    }
}

Usage:

Box(
    contentAlignment = Alignment.Center,
    modifier = Modifier.fillMaxSize()
) {
    Box(
        contentAlignment = Alignment.Center,
        modifier = Modifier
            .size(100.dp)
            .pulse()
    ) {
        Icon(
            imageVector = Icons.Default.AccountCircle,
            contentDescription = null,
        )
    }
}

Screen Recording 2023-04-19 at 16.14.07.mov

[KotlinLeaner]

what is the difference between of duration value using 3000 or 3_000 ?

[Oleksandr Balan]

They are the same, it is just about readability, see
https://kotlinlang.org/docs/numbers.html#literal-constants-for-numbers

[KotlinLeaner]

Above solution is good.

[KotlinLeaner]

Thanks it great help

[KotlinLeaner]

What is the purpose of this formula

StartOffset(it * duration / count)

?

[Oleksandr Balan]

In that scope it refers to the index of item in the list and this formula is used to delay each “circle”. For example when duration is 3s and there are 3 circles the first one will have delay of 0ms (0 * 3_000 / 3), the second circle will start its animation after 1s (1 * 3_000 / 3) and the last one will start after 2s (2 * 3_000 / 3)

[KotlinLeaner]

ohh nice explanation.. Thanks

[Oleksandr Balan]

Looks good to me 👍

As a small tip you could replace Offset(x = size.width / 2, y = size.height / 2) with simple center , it is a property provided in DrawScope

[KotlinLeaner]

I really appreciate it for helping me.