手把手教你写 Compose 动画 -- 更强大的多组件切换动画 API：AnimatedContent

Jetpack Compose 提供了一系列功能强大且可扩展的 API，可用于在应用界面中轻松实现各种动画效果。这一系列文章会逐个介绍所有的动画 API，通过最直观的 Demo 示例，手把手教你怎么写动画以及带你了解动画背后的原理。

📑 手把手教你写 Compose 动画 - - 状态转移型动画 API：animate*AsState()

📑 手把手教你写 Compose 动画 - - 流程定制型动画 API：Animatable()

📑 手把手教你写 Compose 动画 - - 讲的不能再细的 AnimationSpec 动画规范

📑 手把手教你写 Compose 动画 - - 过渡动画 API：Transition

📑 手把手教你写 Compose 动画 - - 显示与消失 API：AnimatedVisibility

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

📑 手把手教你写 Compose 动画 - - 更强大的多组件切换动画 API：AnimatedContent

📑 手把手教你写 Compose 动画 - - 组件大小变化 API：animateContentSize

---

📓 动画图表

在每一篇文章开头，我都会放一张 Compose 动画 API 的图表，以便你有最直观的感受。

---

📓 AnimatedContent()

AnimatedContent 用来控制多个组件的入场和出场，同时还能对入场和出场效果做定制，相当于是 AnimatedVisibility 和Crossfade 的结合，AnimatedContent 出入场动画效果的尺寸是渐变的，这个是区别于 Crossfade 的一个点。

还是那句话：探索新技术的最佳方式是尝试它们，我们把 Crossfade 那个代码示例搬过来：

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

        setContent {
            cf()
        }
    }
}

@Composable
fun cf() {
    var shown by remember { mutableStateOf(true) }

    Column (
        modifier = Modifier.fillMaxWidth(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Crossfade(targetState = shown, animationSpec = tween(3000), label = "Crossfade") {
            if (it) {
                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(60.dp)
            .clip(shape = CircleShape)
    )
}

看下效果：

Crossfade 是没法对尺寸变换进行渐变的，那么我们现在来看看 AnimatedContent 的效果。

@Preview
@OptIn(ExperimentalAnimationApi::class)
@Composable
fun cf() {
    var shown by remember { mutableStateOf(true) }

    Column (
        modifier = Modifier.fillMaxWidth(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Spacer(modifier = Modifier.height(100.dp))
        AnimatedContent(targetState = shown, label = "AnimatedContent") {
            if (it) {
                showCR7_1()
            } else {
                showCR7_2()
            }
        }

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

看下效果：

Perfect！效果要比 Crossfade 好多了，不仅图片淡入淡出，而且尺寸变化也是渐变的。

现在我们再通过动画预览看下效果：

可以很清晰的发现，这里有好几种入场和出场的动画效果，我们之前研究过 AnimatedVisibility，它是对单个内容的出现和消失添加动画效果的，但我们这里的场景是对多个内容（多个组件）的出现和消失添加动画效果，而且它的动画效果很明显用到了 AnimatedVisibility，是怎么做的呢？

这就涉及到 AnimatedContent 函数定义里面的一个核心参数了，我们来看一下：

@ExperimentalAnimationApi
@Composable
fun <S> AnimatedContent(
    targetState: S,
    modifier: Modifier = Modifier,
    transitionSpec: AnimatedContentScope<S>.() -> ContentTransform = {
        fadeIn(animationSpec = tween(220, delayMillis = 90)) +
            scaleIn(initialScale = 0.92f, animationSpec = tween(220, delayMillis = 90)) with
            fadeOut(animationSpec = tween(90))
    },
    contentAlignment: Alignment = Alignment.TopStart,
    label: String = "AnimatedContent",
    content: @Composable() AnimatedVisibilityScope.(targetState: S) -> Unit
)

我们发现它有一个核心参数：transitionSpec，而且需要一个 ContentTransform 对象。

---

📓 ContentTransform

我们看下 ContentTransform 的构造函数：

@ExperimentalAnimationApi
class ContentTransform(
    val targetContentEnter: EnterTransition,
    val initialContentExit: ExitTransition,
    targetContentZIndex: Float = 0f,
    sizeTransform: SizeTransform? = SizeTransform()
) {
    var targetContentZIndex by mutableStateOf(targetContentZIndex)
    var sizeTransform: SizeTransform? = sizeTransform
        internal set
}

它有四个核心参数，我们一个个分析下。

1. targetContentEnter：目标组件入场动画

什么是目标组件的入场动画？对于我们这个例子来说，就是 showCR7_2() 这个可组合项。

这个入场动画在哪里设定的？我们之前看到过：

transitionSpec: AnimatedContentScope<S>.() -> ContentTransform = {
    fadeIn(animationSpec = tween(220, delayMillis = 90)) +
        scaleIn(initialScale = 0.92f, animationSpec = tween(220, delayMillis = 90)) with
        fadeOut(animationSpec = tween(90))
},

我们来分析下这段代码：

? fadeIn() + scaleIn() 不难理解，我们在 AnimatedVisibility 一文中讲过，这是淡入和缩放两个入场动画的合并。
? fadeOut() 也不难理解，它是出场淡出的动画。

但是 with 是什么？

@ExperimentalAnimationApi
infix fun EnterTransition.with(exit: ExitTransition) = ContentTransform(this, exit)

原来这么简单：直接创建了 ContentTransform，并且你看到它的参数么？

this -- fadeIn(animationSpec = tween(220, delayMillis = 90)) +
        scaleIn(initialScale = 0.92f, animationSpec = tween(220, delayMillis = 90))

exit -- fadeOut(animationSpec = tween(90))

所以更进一步：

class ContentTransform(
    val targetContentEnter: EnterTransition,
    val initialContentExit: ExitTransition,

---
targetContentEnter -- this -- fadeIn(animationSpec = tween(220, delayMillis = 90)) +
        scaleIn(initialScale = 0.92f, animationSpec = tween(220, delayMillis = 90))

initialContentExit -- exit -- fadeOut(animationSpec = tween(90))

2. initialContentExit：初始组件的出场动画

什么是目标组件的出场动画？对于我们这个例子来说，就是 showCR7_1() 这个可组合项。

3. targetContentZIndex：控制 Z 轴高度，控制绘制顺序，靠上就遮盖别的组件

一般不用配置这个参数，因为默认入场的组件都会后绘制，出场的先绘制。

4. sizeTransform：对尺寸渐变动画的配置

我不知道你看之前的动画的时候有没有发现一个疑问点，我们再来看下动画：

尺寸渐变的过程中，明显有裁切的效果，这个就是 sizeTransform 参数的原因。

@ExperimentalAnimationApi
class ContentTransform(
    val targetContentEnter: EnterTransition,
    val initialContentExit: ExitTransition,
    targetContentZIndex: Float = 0f,
    sizeTransform: SizeTransform? = SizeTransform() // 对尺寸渐变动画的配置
)

我们来看下 SizeTransform 的构造函数：

@ExperimentalAnimationApi
fun SizeTransform(
    clip: Boolean = true,
    sizeAnimationSpec: (initialSize: IntSize, targetSize: IntSize) -> FiniteAnimationSpec<IntSize> =
        { _, _ -> spring(visibilityThreshold = IntSize.VisibilityThreshold) }
): SizeTransform = SizeTransformImpl(clip, sizeAnimationSpec)

发现了没？SizeTransform 有两个参数：

1. clip：是否裁切
2. sizeAnimationSpec：动画曲线设置

动画曲线设置太熟了，我们不聊了，现在来看下不裁切会是什么样。

比如我们自己写一个 transitionSpec：

@Composable
fun cf() {
    var shown by remember { mutableStateOf(true) }

    Column (
        modifier = Modifier.fillMaxWidth(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Spacer(modifier = Modifier.height(100.dp))
        AnimatedContent(targetState = shown,
            transitionSpec = { fadeIn(tween(1500)) with
                    fadeOut(tween(1500, delayMillis = 1500)) },
            label = "AnimatedContent") {
            if (it) {
                showCR7_1()
            } else {
                showCR7_2()
            }
        }

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

看下动画效果：

现在我们把裁切关掉，像下面这么写：

transitionSpec = { fadeIn(tween(1500, delayMillis = 1500)) with
        fadeOut(tween(1500)) using SizeTransform(clip = false) },

using 是什么？

@ExperimentalAnimationApi
infix fun ContentTransform.using(sizeTransform: SizeTransform?) = this.apply {
    this.sizeTransform = sizeTransform
}

懂了吧，直接看效果：