Android Compose Transition 动画

wk灬丨2023-12-15 16:22

Transition 是一种动画效果，用于在组件的状态之间进行平滑的过渡。它可以帮助我们在状态变化时，以一种流畅的方式更新 UI。通过使用 Compose 的 Transition API，您可以在应用中创建各种各样的动画效果，从而增强用户体验并提高应用的吸引力。

在 Compose 中推荐使用 updateTransition 来创建 Transition 动画，因为可以进行预览。

用法：

Kotlin 复制代码

@Preview(showBackground = true)
@Composable
fun MyScreen() {
    var isVisible by remember { mutableStateOf(true) }

    val transition = updateTransition(targetState = isVisible, label = "kang")
    val colorAnimate by transition.animateColor(transitionSpec = { tween(300) }, label = "colorAnimate") {
        if (it) Color(0xFF03A9F4) else Color(0xFFFFEB3B)
    }
    val dpAnimate by transition.animateDp(transitionSpec = { tween(300) }, label = "dpAnimate") {
        if (it) 0.dp else 25.dp
    }
    val sizeAnimate by transition.animateSize(transitionSpec = { tween(300) }, label = "sizeAnimate") {
        if (it) Size(150f, 60f) else Size(270f, 50f)
    }

    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Box(
            modifier = Modifier
                .size(sizeAnimate.width.dp, sizeAnimate.height.dp)
                .background(colorAnimate, RoundedCornerShape(dpAnimate))
                .clickable(interactionSource = MutableInteractionSource(), indication = null) {
                    isVisible = !isVisible
                }
                .padding(15.dp),
            contentAlignment = Alignment.Center
        ) {
            Text(text = "Hello, wk灬丨!", color = Color.Gray)
        }
    }
}

代码直接贴上去之后点击 Split 就可以直接进行预览了：

在最新的 Android Studio 使用 updateTransition 可以进行 Compose 动画预览。点击：

之后出现的画面就是 compose 的动画预览页了，下面的进度条可以拖动进行动画预览

也可以展开动画预览它的曲线：

虽然预览能够很清晰的看到具体的曲线和动画变换的过程，但是非常可以不能编辑，若能在如此详细的预览页能够编辑，那每一位开发制作动画都非常方便了（甚至有点视频剪辑的感觉）