targetState参数指定目标， transitionSpec参数用来指定动画行为。编写代码如下所示：

AnimatedContent(targetState = data,    transitionSpec = {        (scaleIn() with scaleOut()).using(SizeTransform(false))    }) {    Text(text = "数值:${data}")}

 我们先来看，代码为什么可以这样写，transitionSpec参与是ContentTransform对象，我们来看ContentTransform的源码，如下所示：

@ExperimentalAnimationApiclass ContentTransform(    val targetContentEnter: EnterTransition,    val initialContentExit: ExitTransition,    targetContentZIndex: Float = 0f,    sizeTransform: SizeTransform? = SizeTransform())

可以看到参数指定了进入动画、退出动画 这一点与AnimatedVisibility的使用是相同的。

sizeTransForm参数定义了在初始内容与目标内容之间添加动画效果，进入、退出动画可以使用with函数来组合，sizeTransform参数提供了using扩展函数来使用，代码如下所示：

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

运行程序，效果图如下所示。

Crossfade与animateContentSize

animateContentSize可以在尺寸大小改变的时候添加动画，Crossfade是淡入淡出动画，可用于视图切换等操作。首先来看animateContentSize的使用。

animateContentSize

编写一个示例，包含一个Edittext和一个TextView，TextView中实时显示Edittext的输入内容，代码如下所示：

Column() {    var message by remember { mutableStateOf("") }    TextField(value = message, onValueChange = { message = it })    Box(        modifier = Modifier            .background(Color.Red)            .animateContentSize()    ) {        Text(text = message)    }}

 为了便于观察效果，我们这里设置背景为红色，运行程序，效果图如下所示。

有一种丝滑般的感觉，一起纵享丝滑吧~

Crossfade

Crossfade可用于两个视图间的切换动画，编写代码：按钮控制当前页面显示Screen1页面或Screen2页面，为了便于区分，两个页面分别设置背景为蓝色和绿色。具体代码此处就省略了。

页面切换部分代码如下所示：

var flag by remember {    mutableStateOf(false)}Column() {    Crossfade(targetState = flag, animationSpec = tween(3000)) {        when (it) {            false -> Screen1()            true -> Screen2()        }    }    Button(onClick = { flag = !flag }) {        Text(text = "视图切换")    }}               

为了便于观察效果，此处为动画设置tween的间隔时间为3秒，运行程序，效果图如下所示：

Crossfade函数源码如下所示：

@OptIn(ExperimentalAnimationApi::class)@Composablefun  Crossfade(    targetState: T,    modifier: Modifier = Modifier,    animationSpec: FiniteAnimationSpec = tween(),    content: @Composable (T) -> Unit)            

 animationSpec参数是FiniteAnimationSpec类型的参数，实现类有TweenSpec、SpringSpec等，默认值是tween，tween是一个可配置的曲线动画，源码如下所示：

@Stablefun  tween(    durationMillis: Int = DefaultDurationMillis,    delayMillis: Int = 0,    easing: Easing = FastOutSlowInEasing): TweenSpec = TweenSpec(durationMillis, delayMillis, easing)           

我们也可以设置spring等效果，这里读者可自行尝试。

其他

除此之外，还有animate*AsState、rememberInfiniteTransition等低级别的动画API，更多用法，这里不再一一讲解了。回到刚开始前言的问题，如何实现 一个正在加载的动画呢？

这里我们使用rememberInfiniteTransition来定义一个无限加载的动画，并通过infiniteRepeatable来制定动画规范。最后一起来看一下，我的Compose开源项目中所实现的加载框的效果吧~

写在最后

近期越来越感觉，学无止境，需要学习的东西太多太多~ ，期待我们下篇文章 再见~