如何在jetpack compose中将动画的两个部分链接在一起，以便偏移量增加然后减少？

Question

我最近开始使用 jet pack compose 制作动画，并且想知道如何制作它，以便当您增加偏移值时，一旦动画达到该值，它就会将该值更改为另一个值。就像更新过渡一样，但不是同时进行，而是一个接一个地进行。

Answer 1

实际上@RaBaKa的答案是部分正确的，但它缺少有关动画应如何运行的信息。

它应该作为副作用来完成。例如，您可以使用LaunchedEffect：它已经在协程作用域中运行。一个接一个地运行动画是完全正常的 - 一旦第一个挂起函数完成，第二个就会开始：

val value = remember { Animatable(0f) }
LaunchedEffect(Unit) {
    value.animateTo(
        20f,
        animationSpec = tween(2000),
    )
    value.animateTo(
        10f,
        animationSpec = tween(2000),
    )
}
Text(value.value.toString())

如果您想执行此操作来响应某些操作（例如按下按钮），则需要自己运行协程。最重要的是在同一个协程中运行动画，以便将它们链接起来。

val value = remember { Animatable(0f) }
val scope = rememberCoroutineScope()
Button(onClick = {
    scope.launch {
        value.animateTo(
            20f,
            animationSpec = tween(2000),
        )
        value.animateTo(
            10f,
            animationSpec = tween(2000),
        )
    }
}) {
    
}
Text(value.value.toString())

Answer 2

正确答案是使用 Kotlin 协程。我设法使它工作正常。您必须使用协程才能以正确的顺序启动动画，如下所示：

animationRoutine.launch {
    coroutineScope {
        launch {
            animate(
                startingValue,
                targetValue,
                animationSpec = whatYouWant,
                block = { value, _ -> whateverYouNeed = value }
            )
        }
        launch {
            animate(
                initialValue,
                targetValue,
                animationSpec = whatYouWant,
                block = { value, _ -> whateverYouNeed = value }
            )
        }
}

如果您告诉它允许您在较低级别一次运行多个动画，并为动画的下一部分添加另一个协程来对动画进行排序，则每个启动范围都会以非阻塞方式启动所有内容。