Hi guys, Is there any similar <library> for pulse ...
# compose-android
k
Hi guys, Is there any similar library for pulse animation in jetpack-compose? Any article how to build in compose?
o
I would simply draw it on Canvas with a modifier. Somethink like this could be a starting point:
Copy code
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:
Copy code
Box(
    contentAlignment = Alignment.Center,
    modifier = Modifier.fillMaxSize()
) {
    Box(
        contentAlignment = Alignment.Center,
        modifier = Modifier
            .size(100.dp)
            .pulse()
    ) {
        Icon(
            imageVector = Icons.Default.AccountCircle,
            contentDescription = null,
        )
    }
}
k
what is the difference between of duration value using
3000
or
3_000
?
o
They are the same, it is just about readability, see https://kotlinlang.org/docs/numbers.html#literal-constants-for-numbers
k
Above solution is good.
Thanks it great help
What is the purpose of this formula
Copy code
StartOffset(it * duration / count)
?
o
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
)
k
ohh nice explanation.. Thanks
o
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
k
I really appreciate it for helping me.