androidkotlinandroid-jetpack-composejetbrains-composeandroid-jetpack-compose-canvas

Jetpack Compose Animation skips to target value immediately


I'm trying to achieve a smooth animation of a simple round timer. Like this, but smoother timer

However it just skips to targetValue immediately and that's it there's no animation at all. I'm trying to do it like this:

@Composable
private fun SampleTimer(duration: Int, modifier: Modifier = Modifier) {
    var animatedPercentage by remember { mutableStateOf(1f) }
    LaunchedEffect(Unit) {
        animate(
            initialValue = 1f,
            targetValue = 0f,
            animationSpec = infiniteRepeatable(
                tween(
                    durationMillis = duration.seconds.inWholeMilliseconds.toInt(),
                    easing = LinearEasing,
                ),
            ),
        ) { value, _ ->
            animatedPercentage = value
        }
    }
    val arcColor = MaterialTheme.colors.primaryVariant
    Canvas(
        modifier = modifier,
    ) {
        drawArc(
            color = arcColor,
            useCenter = true,
            startAngle = -90f,
            sweepAngle = -360f * animatedPercentage,
        )
    }
}

Why does this happen, what am I missing here?


Solution

  • The problem was that the animations were turned off in developer settings on my device, and I forgot that