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

Question

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

Answer 1

也许你可以使用 Animatable

val value = remember { Animatable(0f) }    //Initial Value

然后在撰写中你可以使用

value.animateTo(20f)

然后

value.animateTo(10f)

更多信息请访问官方documentation

Answer 2

实际上@RaBaKa 的回答部分正确，但缺少关于动画应该如何的信息运行。

它应该作为副作用来完成。例如，您可以使用 LaunchedEffect：它已经在协程范围内运行ning。运行一个接一个动画是完全正常的 - 一旦第一个暂停功能完成，第二个将开始：

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 3

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

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

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

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

How to i chain two parts of an animation together in jetpack compose so the the offset increases then decreases?

android-animation

kotlin

kotlin-coroutines

android-jetpack-compose

jetpack-compose-animation