IssueTracker

Jetpack Compose version: Jetpack Compose component used: Android Studio Build: Kotlin version:

Steps to Reproduce or Code Sample to Reproduce: 1. 2. 3.

Stack trace (if applicable):

Jetpack Compose version: 2024.09.02 Jetpack Compose component used: rememberInfiniteTransition.animateFloat Android Studio Build: AI-241.19072.14.2412.12360217, 202409130051 Kotlin version: 2.0.20

I created a circle ripple animation box then played with it. While it already satisfies my current use case, I tested if I could periodically increase the number of ripples. The result is the ripples are increasing but the animations are retained instead of following the updated duration.

Code Sample to Reproduce:

@Composable
fun CircleRippleBox(
    modifier: Modifier = Modifier,
    backgroundColor: Color = MaterialTheme.colorScheme.tertiaryContainer,
    contentColor: Color = contentColorFor(backgroundColor),
    rippleCount: Int = 3,
    animationDuration: Int = rippleCount * 1000,
    repeatDelay: Int = 0,
    initialScale: Float = 0f,
    content: @Composable () -> Unit
) {
    val transition = rememberInfiniteTransition(label = "Circle Ripple Transition")
    val range = remember(rippleCount) {
        0..<rippleCount
    }
    val scaleStates = range.map { index ->
        transition.animateFloat(
            initialValue = initialScale,
            targetValue = 1f,
            animationSpec = infiniteRepeatable(
                tween(
                    durationMillis = animationDuration,
                    easing = LinearEasing,
                    delayMillis = repeatDelay
                ),
                initialStartOffset = StartOffset(
                    offsetMillis = (animationDuration / rippleCount) * index
                )
            ),
            label = "Circle Ripple Scale"
        )
    }
    Box(
        modifier = modifier,
        contentAlignment = Alignment.Center
    ) {
        scaleStates.forEach { state ->
            val scale by state
            Box(
                modifier = Modifier
                    .background(color = Color.Transparent)
                    .graphicsLayer {
                        scaleX = scale
                        scaleY = scale
                        alpha = 1 - scale
                    }
                    .matchParentSize()
                    .background(
                        color = backgroundColor,
                        shape = CircleShape
                    )
            )
        }
        CompositionLocalProvider(
            LocalContentColor provides contentColor
        ) {
            content()
        }
    }
}

@PreviewLightDark
@Composable
fun CircleRippleBoxPreview() {
    var ripples by remember {
        mutableIntStateOf(1)
    }
    val duration = remember(ripples) {
        ripples * 1000
    }
    LaunchedEffect(ripples) {
        delay(ripples * 1000L)
        ripples++
    }
    MaterialTheme {
        Surface(
        ) {
            CircleRippleBox(
                modifier = Modifier.size(250.dp),
                rippleCount = ripples,
                animationDuration = duration,
            ){

            }
        }
    }
}