Jetpack Compose Animation 立即跳转到目标值

Question

我正在尝试实现一个简单的圆形计时器的平滑 animation。 像这样，但更流畅

然而，它只是立即跳到 targetValue，就是这样，根本没有 animation。 我正在尝试这样做：

@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,
        )
    }
}

为什么会这样，我在这里错过了什么？

Answer 1

您可以使用Animatable state。角度将从 0–360° 进行动画处理。

就像是：

val angle = remember {
    Animatable(0f)
}
LaunchedEffect(angle) {
    launch {
        angle.animateTo(360f, animationSpec =
             infiniteRepeatable(
                tween(
                    durationMillis = 5000,
                    easing = LinearEasing,
                ),
            )
        )
    }
}

val arcColor = Red

Canvas(
    modifier = Modifier.size(100.dp),
) {
    drawArc(
        color = arcColor,
        useCenter = true,
        startAngle = -90f,
        sweepAngle = -angle.value,
    )
}

Answer 2

问题是动画在我设备的开发者设置中被关闭了，我忘记了