Compose的动画

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第7天，点击查看活动详情

动画是我们页面不可或缺的部分，它是我们的界面对用户的体验更好，Compose动画使用composable函数也是很好写的，对于compose的动画主要分为下面几种： 第一种：简单动画，简单动画主要是一些value的变化从而达到动画的效果，在compose里面有下面这些：

• animateDpAsState
• animateFloatAsState
• animateIntAsState
• animateIntOffsetAsState
• animateIntSizeAsState
• animateRectAsState
• animateValueAsState

看一个color变化的简单例子

var isRed by remember {
    mutableStateOf(true)
}
val background by animateColorAsState(
    targetValue = if (isRed) Color.Yellow else Color.Red,
    animationSpec = tween(1000)
)
Box(
    modifier = Modifier
        .background(background)
        .size(350.dp),

    ) {
}
LaunchedEffect(key1 = Unit) {
    for (i in 0..10) {
        isRed = !isRed
        delay(2000)
    }
}

这个例子就是给box做一个背景变换的动画，其中isRed是一个state变量，在animateColorAsState中有两个参数，一个是关于targetValue，这个就是最终要变成的颜色，另外一个animationSpec表示动画的类型。这个动画的意思就是从红色变成黄色，或者黄色变成红色，动画时长为1秒。把这个动画变量设置成box的background，那么当isRed这个值变化的时候，就会触发这个动画的执行。

那如果同时有颜色和大小的变化应该怎么处理呢？这个就属于属性动画的组合了。组合动画使用的就是Transition，这里举一个简单的例子使用dp的变化和颜色的变化为例子：

var hState: HState by remember {
    mutableStateOf(HState.Small)
}
val transition = updateTransition(targetState = hState, label = "hh")
val color by transition.animateColor(label = "color", transitionSpec = { tween(1000) }) {
    if (it == HState.Small) HState.Large.color else HState.Small.color
}
val size by transition.animateDp(
    label = "",
    transitionSpec = {
        if (targetState == HState.Small) spring(
            dampingRatio = DampingRatioHighBouncy,
            stiffness = Spring.StiffnessLow
        ) else spring(dampingRatio = DampingRatioMediumBouncy, stiffness = Spring.StiffnessLow)
    }) {
    if (it == HState.Small) HState.Large.size else HState.Small.size

}
Icon(
    imageVector = Icons.Default.Favorite, contentDescription = "", modifier = Modifier
        .size(size), tint = color
)
LaunchedEffect(key1 = Unit) {
    for (i in 0..2) {
        hState = if (hState == HState.Small) {
            HState.Large
        } else {
            HState.Small
        }
        delay(2000)
    }
}

首先定义一个Transition对象，然后使用这个Transition对象分别定义color的Animate以及size的Animate。写好动画里面的动画逻辑，颜色还是从红色变成黄色，或者从黄色变成红色。size是从大变到小，或者从小变成大，这里使用的是Spring这种类型的动画，还有Tween类型的动画，Spring类似那种弹簧一样的渐变动画。最后分别把color的动画以及size的动画设置给定义的icon的背景和size，这样就可以看到动画了。

除了上面的动画还有其他的动画，例如页面切换的时候动画，即VisibleAnimate，可见动画有淡入淡出，放大进入等等。 除了上面上面官方的一些动画，自己也可以根据基础的动画自定义自己的动画，最主要还是第一依赖state的变化，第二就是依赖基础的动画。