时间戳

首页 > 解决方案 > 旋转动画在 Jetpack Compose 中不起作用

android - 旋转动画在 Jetpack Compose 中不起作用

问题描述

我在 Jetpack Compose 中尝试过动画。我在旋转动画中遇到问题。

似乎一切都很好。但不知道为什么它不起作用。

我的代码：

     @Composable
    private fun RotateAnimationContent() {
        val isRotated = rememberSaveable { mutableStateOf(false) }
        val rotationAngle by animateFloatAsState(
            targetValue = if (isRotated.value) 360F else 0F,
            animationSpec = tween(durationMillis = 1500,easing = FastOutLinearInEasing)

        )
        Column {
            Box(modifier = Modifier.background(Color.Red).size(100.dp).rotate(rotationAngle))
            Button(
                onClick = { isRotated.value = !isRotated.value },
                modifier = Modifier.padding(10.dp)
            ) {
                Text(text = "Rotate Box")
            }
        }
    }

标签： androidandroid-animationandroid-jetpack-compose

解决方案

将.rotate(rotationAngle)作为 的第一个修饰符Box。在背景和大小之前。

Column {
    Box(modifier = Modifier.rotate(rotationAngle).background(Color.Red).size(100.dp))
    Button(
        onClick = { isRotated.value = !isRotated.value },
        modifier = Modifier.padding(10.dp)
    ) {
        Text(text = "Rotate Box")
    }
}

检查这个非常详细的答案，以更好地理解为什么修饰符的顺序很重要。

推荐阅读