在打开 activity jetpack compose 时，创建具有延迟和持续时间的动画图像

Question

我需要你的帮助。

一切都在标题中，我不知道我该怎么做...请帮助我。我使用了很多像补间、枚举 class 和其他东西，但没有用，我想要一个 200dp 的初始值，当 activity 打开时，2 秒后，图像从 200dp 开始, 在 2 秒内达到 100dp。谢谢。

Answer 1

与 1.0.0-beta04 您可以使用 Animatable API 和 LaunchedEffect 可组合项。

val animatedProgress = remember { Animatable(1f) }

LaunchedEffect(animatedProgress) {
    animatedProgress.animateTo(0.5f,
        animationSpec = tween(
            durationMillis = 2000,  
            delayMillis = 2000
        ))
}

Image(
    painterResource(id = R.drawable.xxx), "contentDescription",
    modifier = Modifier
            .size(100.dp)
            .graphicsLayer{
                scaleY = animatedProgress.value;
                scaleX = animatedProgress.value}
)

感谢关于 .graphicsLayer 的提示。

Answer 2

@Gabrial 的回答是完美的，但可以通过使用图形层属性而不是大小来优化，这将导致更好的性能，因为在动画期间不会发生重组。

编辑。无罪 @加布里亚尔。你的 anser 仍然会触发重组，因为你没有使用带有 lambda 修饰符的图形层。

根据文档如果层参数由 androidx.compose.runtime.State 支持或动画值更喜欢在 GraphicsLayerScope 上使用 lambda 块重载，因为读取块内的状态只会导致层属性更新而不会触发重组和重新布局。

所以上面的代码片段应该是这样的

val animatedProgress = remember { Animatable(1f) }

LaunchedEffect(animatedProgress) {
    animatedProgress.animateTo(0.5f,
        animationSpec = tween(
            durationMillis = 2000,  
            delayMillis = 2000
        ))
}

Image(
    painterResource(id = R.drawable.xxx), "contentDescription",
    modifier = Modifier
            .size(100.dp)
            .graphicsLayer{
                scaleY = animatedProgress.value,
                scaleX = animatedProgress.value
}

在打开 activity jetpack compose 时，创建具有延迟和持续时间的动画图像

Create animation image going up with delay and duration when opening the activity jetpack compose

android

kotlin

android-jetpack

android-jetpack-compose