Compose 动画 (五) : animateContentSize / animateEnterExit / Crossfade / AnimatedContent

1. 前言

AnimatedVisibility、animateXxxAsState、animateContentSize、Crossfade、AnimatedContent 这几个API，都是Compose的高级别动画API，是比较易用的。
上两篇文章我们已经介绍了AnimatedVisibility，这篇文章我们会介绍剩下的那几个API。

2. animateContentSize

使用animateContentSize，可让Compose组件大小发生变化的时候，具备动画的效果。

比如，我们以下面这个例子为例

var message by remember { mutableStateOf("Hello") }
Column {Button(onClick = {message += "Hello"}) {Text(text = "Change")}Spacer(modifier = Modifier.height(16.dp))Box(modifier = Modifier.background(Color.Blue).padding(10.dp).animateContentSize(),contentAlignment = Alignment.Center) {Text(text = message, color = Color.White)}
}

可以看到效果

当然，我们也可以给动画添加一些特效，比如回弹效果

var message by remember { mutableStateOf("Hello") }
Column {Button(onClick = {message += "Hello"}) {Text(text = "Change")}Spacer(modifier = Modifier.height(16.dp))Box(modifier = Modifier.background(Color.Blue).padding(10.dp).animateContentSize(spring(Spring.DampingRatioHighBouncy)),contentAlignment = Alignment.Center) {Text(text = message, color = Color.White)}
}

关于回弹之类的animationSpec的动画效果，后续的文章会讲到，感兴趣的童鞋可以先关注一波。

注意：animateContentSize 在修饰符链中的位置顺序很重要。为了确保流畅的动画，请务必将其放置在任何大小修饰符（如 size 或 defaultMinSize）前面，以确保 animateContentSize 会将带动画效果的值的变化报告给布局。

3. animateEnterExit

animateEnterExit需要使用在AnimatedVisibility里面（直接或间接子项）。
我们可以使用Modifier.animateEnterExit为每个子项指定不同的动画效果。
比如这里添加的slide动画会覆盖AnimatedVisibility设置的fade动画。

var visible by remember {mutableStateOf(false)}AnimatedVisibility(visible = visible,enter = fadeIn(tween(durationMillis = 2000)),exit = fadeOut(tween(durationMillis = 2000))) {Box(Modifier.fillMaxSize().background(Color.Gray)) {Box(Modifier.align(Alignment.Center).animateEnterExit(enter = slideInVertically(tween(durationMillis = 2000)),exit = slideOutVertically(tween(durationMillis = 2000))).sizeIn(minWidth = 64.dp, minHeight = 64.dp).background(Purple700)) {//Content of the notification...}}}LaunchedEffect(key1 = Unit, block = {delay(2500)visible = true})

效果如下，这里动画的时长设为了2秒，可以看的更清楚一些

有时我们希望AnimatedVisibility内部每个子组件的过渡动画各不相同，
那么就要为AnimatedVisibility的enter与exit参数分别设置EnterTransition.None和ExitTransition.None，然后就可以在每个组件分别指定animateEnterExit了。

animateEnterExit 显示是试验性质的，将来可能会发生变化，也可能会被完全移除。

4. Crossfade

Crossfade用来将页面上显示的内容进行切换。
两个交替出现的组件进行渐变的切换，一个消失，而另一个显示出来。
动画效果是淡入淡出，并对尺寸进行处理 (瞬间改变)。
Crossfade只支持这一种动画效果，是对于AnimatedContent (我们下面会讲到) 的简化版本。

4.1 Crossfade的使用

我们来试一下

Column(horizontalAlignment = Alignment.CenterHorizontally) {var showPicture by remember { mutableStateOf(false) }Crossfade(targetState = showPicture) {if (it) {Image(painter = painterResource(id = R.mipmap.photot1),modifier = Modifier.width(300.dp),contentDescription = null)} else {Box(Modifier.height(300.dp * 9 / 16).width(300.dp).background(Color.Blue))}}Spacer(modifier = Modifier.height(10.dp))Button(onClick = { showPicture = !showPicture }) {Text(text = "切换")}
}

显示效果

4.2 Crossfade尺寸不一致的情况

如果切换的两个组件，尺寸不一致，就会出现如下情况

如果转场前是大尺寸，转场后是小尺寸，会等转场快结束的时候，变成小尺寸
如果转场前是小尺寸，转场后是大尺寸，会在转场刚开始的时候，变成大尺寸

Column(horizontalAlignment = Alignment.CenterHorizontally) {var showPicture by remember { mutableStateOf(false) }Crossfade(targetState = showPicture) {if (it) {Image(painter = painterResource(id = R.mipmap.photot1),modifier = Modifier.width(300.dp),contentDescription = null)} else {Box(Modifier.size(60.dp).clip(RoundedCornerShape(30.dp)).background(Color.Blue))}}Spacer(modifier = Modifier.height(10.dp))Button(onClick = { showPicture = !showPicture }) {Text(text = "切换")}
}

效果如下所示

5. AnimatedContent

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

AnimatedContent 显示是试验性质的，将来可能会发生变化，也可能会被完全移除。

Column(horizontalAlignment = Alignment.CenterHorizontally) {var showPicture by remember { mutableStateOf(false) }AnimatedContent(showPicture) {if (it) {Image(painter = painterResource(id = R.mipmap.photot1),modifier = Modifier.width(300.dp),contentDescription = null)} else {Box(Modifier.size(60.dp).clip(RoundedCornerShape(30.dp)).background(Color.Blue))}}Spacer(modifier = Modifier.height(10.dp))Button(onClick = { showPicture = !showPicture }) {Text(text = "切换")}
}

显示效果如下所示

5.1 实现数字增加的效果

使用AnimatedContent，设置自定义的动画效果，来实现数字增加的效果

Column {var count by remember { mutableStateOf(0) }Button(onClick = { count++ }, Modifier.width(100.dp)) {Text("增加")}Button(onClick = { count-- }, Modifier.width(100.dp)) {Text("减少")}Box(Modifier.size(100.dp).border(1.dp, Color.LightGray).padding(5.dp).background(Color(0xFFF5F5F5)), contentAlignment = Alignment.Center) {AnimatedContent(targetState = count) { targetCount ->Text(text = "$targetCount", fontSize = 20.sp)}}
}

显示效果如下

我们给它设置一个自定义的动画效果

transitionSpec = {if (targetState > initialState) {slideInVertically { height -> height } + fadeIn() withslideOutVertically { height -> -height } + fadeOut()} else {slideInVertically { height -> -height } + fadeIn() withslideOutVertically { height -> height } + fadeOut()}.using(SizeTransform(clip = false))
}

再次运行

6. Compose 动画系列

Compose 动画系列，后续持续更新
Compose 动画 (一) : animateXxxAsState 实现放大/缩小/渐变等效果
Compose 动画 (二) : 为什么animateDpAsState要用val ? MutableState和State有什么区别 ?
Compose 动画 (三) : AnimatedVisibility 从入门到深入
Compose 动画 (四) : AnimatedVisibility 各种入场和出场动画效果
Compose 动画 (五) : animateContentSize / animateEnterExit / Crossfade / AnimatedContent
Compose 动画 (六) : 使用Transition管理多个动画，实现动画预览
Compose 动画 (七) : 高可定制性的动画 Animatable