Jetpack Compose 中图像的无限旋转

时间:2021-07-14 15:43:55

标签: android animation android-jetpack-compose

如何让我的图片无限旋转?

这是我的代码,但动画不起作用

 val angle: Float by animateFloatAsState(
            targetValue = 360F,
            animationSpec = infiniteRepeatable(
                tween(2000))
        )
        Image(
            painter = painterResource(R.drawable.sonar_scanner),
            "image",
            Modifier
                .fillMaxSize()
                .rotate(angle),
            contentScale = ContentScale.Fit
        )

2 个答案:

答案 0 :(得分:2)

您可以使用 InfiniteTransition 使用 rememberInfiniteTransition
类似的东西

val infiniteTransition = rememberInfiniteTransition()
val angle by infiniteTransition.animateFloat(
    initialValue = 0F,
    targetValue = 360F,
    animationSpec = infiniteRepeatable(
        animation = tween(2000, easing = LinearEasing)
    )
)

只是一个笔记。
而不是使用

Modifier.rotate(angle)

你可以使用

     Modifier
        .graphicsLayer {
            rotationZ = angle
        }

正如您可以查看文档:

<块引用>

当您拥有由 androidx.compose.runtime.State 或动画值支持的图层属性时,请首选此版本,因为读取 block 中的状态只会导致图层属性更新,而不会触发重新组合和重新布局。

答案 1 :(得分:1)

在我看来,您应该将预定义的 API 用于此类用例的无限动画。

val infiniteTransition = rememberInfiniteTransition()
val angle by infiniteTransition.animateFloat(
    initialValue = 0f,
    targetValue = 360f,
    animationSpec = infiniteRepeatable(
        animation = keyframes {
            durationMillis = 1000
        }
    )
)