Compose动画（二）：状态改变动画animateXxxAsState

2023-12-08 15:25:29

在Compose中，动画是一种非常重要的功能，它可以为你的应用添加交互性、趣味性和用户体验。在Compose中，动画有两种类型：隐式动画和显式动画。隐式动画由Compose自动处理，而显式动画需要你手动指定。

状态改变动画是Compose中最常见的显式动画之一。它用于在状态改变时对组件进行动画处理。例如，你可以使用状态改变动画来实现按钮的点击动画、文本的输入动画、列表项的添加和删除动画等。

状态改变动画的语法是：

animateXxxAsState(
    targetValue: T,
    transitionSpec: TransitionSpec<T>,
    finishedListener: ((T) -> Unit)? = null
)

其中，targetValue是要动画的目标值，transitionSpec是动画的过渡规范，finishedListener是在动画完成时调用的回调函数。

AnimateXxxAsState有几个不同的变体，用于不同的数据类型。例如，animateIntAsState用于整数动画，animateFloatAsState用于浮点动画，等等。

在Compose中，有很多预定义的动画过渡规范，你也可以自己创建自定义的动画过渡规范。

val transition = tween<Float>(
    durationMillis = 1000,
    easing = FastOutLinearInEasing,
    delayMillis = 200
)

如果你想了解更多关于Compose动画的信息，可以参考官方文档：https://developer.android.com/jetpack/compose/animation

下面，我们通过一个示例来看一下如何在Compose中使用状态改变动画。

@Composable
fun MyButton(
    text: String,
    onClick: () -> Unit
) {
    var isPressed by remember { mutableStateOf(false) }
    val scale = animateFloatAsState(
        targetValue = if (isPressed) 0.9f else 1.0f,
        transitionSpec = tween(durationMillis = 100)
    )

    Button(
        onClick = {
            isPressed = true
            onClick()
            isPressed = false
        },
        modifier = Modifier.scale(scale.value)
    ) {
        Text(text)
    }
}