手把手教你写 Compose 动画 -- 简单页面切换动画 API：Crossfade

Crossfade 用于在两个布局之间用交叉淡入淡出的动画。通过切换传递给当前参数的值，内容以交叉渐变动画的方式切换。

我们来写一个没有动画的简单代码示例：

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            var shown by remember { mutableStateOf(true) }

            Column (
                modifier = Modifier.fillMaxWidth(),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                if (shown) {
                    showCR7_1()
                } else {
                    showCR7_2()
                }

                Button(
                    onClick = { shown = !shown}
                ) {
                    Text(text = "切换")
                }
            }
        }
    }
}

@Composable
fun showCR7_1() {
    Image(
        painter = painterResource(R.drawable.cr7),
        contentDescription = null,
        modifier = Modifier
            .size(90.dp)
            .clip(shape = CircleShape)
    )
}

@Composable
fun showCR7_2() {
    Image(
        painter = painterResource(R.drawable.cr7_2),
        contentDescription = null,
        modifier = Modifier
            .size(90.dp)
            .clip(shape = CircleShape)
    )
}

这段代码非常简单，button 控制 shown 变量值，从而显示不同的 Image。

对于两个 Image 组件我们就可以看出是两个布局界面，现在切换是没有任何动画效果的。

📓 Crossfade

用 Crossfade 就可以实现两个 Image 组件之间的切换动画，很简单：

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            var shown by remember { mutableStateOf(true) }

            Column (
                modifier = Modifier.fillMaxWidth(),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Spacer(modifier = Modifier.height(130.dp))

                Crossfade(targetState = shown, label = "") {
                    if (it) {
                        showCR7_1()
                    } else {
                        showCR7_2()
                    }
                }

                Button(
                    onClick = { shown = !shown}
                ) {
                    Text(text = "切换")
                }
            }
        }
    }
}

我们看下它的函数定义：

@OptIn(ExperimentalAnimationApi::class)
@Composable
fun <T> Crossfade(
    targetState: T,
    modifier: Modifier = Modifier,
    animationSpec: FiniteAnimationSpec<Float> = tween(),
    label: String = "Crossfade",
    content: @Composable (T) -> Unit
) {
    val transition = updateTransition(targetState, label)
    transition.Crossfade(modifier, animationSpec, content = content)
}

它同样可以设置动画曲线：

Crossfade(targetState = shown, animationSpec = tween(3000), label = "")