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

谁借莪１个温暖的怀抱￠ 2023-10-09 15:51 8阅读 0赞

### 1. 前言 ###

`AnimatedVisibility`、`animateXxxAsState`、`animateContentSize`、`Crossfade`、`AnimatedContent` 这几个API，都是`Compose`的高级别动画`API`，是比较易用的。  
[上两篇文章][Link 1]我们已经介绍了`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)
        }
    }

可以看到效果

![在这里插入图片描述][8e9acaffa0cc47e9a268ab1130e6803b.gif]

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

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)
        }
    }

![在这里插入图片描述][7d7bcb4a6b4141eb8096227f8401be46.gif]

关于回弹之类的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秒，可以看的更清楚一些

![在这里插入图片描述][550312a1cbdd4af482360dd22f56b5fb.gif]  
有时我们希望`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 = "切换")
        }
    }

显示效果

![在这里插入图片描述][671aae69e43d475cb2d8447910bb7c54.gif]

#### 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 = "切换")
        }
    }

效果如下所示

![在这里插入图片描述][a4ed91a36fc543089d327a5a888f6391.gif]

### 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 = "切换")
        }
    }

显示效果如下所示

![在这里插入图片描述][68fc78ca13f04eef8cc3e90e3ec9109a.gif]

#### 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)
            }
        }
    }

显示效果如下  
![在这里插入图片描述][286c6be5e83440c392174d6e3aaf1500.gif]

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

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

再次运行  
![在这里插入图片描述][0b197044065c40e5ae6d8be2b4aa72a0.gif]

### 6. Compose 动画系列 ###

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

[Link 1]: https://blog.csdn.net/EthanCo/article/details/129268245
[8e9acaffa0cc47e9a268ab1130e6803b.gif]: https://img-blog.csdnimg.cn/8e9acaffa0cc47e9a268ab1130e6803b.gif
[7d7bcb4a6b4141eb8096227f8401be46.gif]: https://img-blog.csdnimg.cn/7d7bcb4a6b4141eb8096227f8401be46.gif
[550312a1cbdd4af482360dd22f56b5fb.gif]: https://img-blog.csdnimg.cn/550312a1cbdd4af482360dd22f56b5fb.gif
[671aae69e43d475cb2d8447910bb7c54.gif]: https://img-blog.csdnimg.cn/671aae69e43d475cb2d8447910bb7c54.gif
[a4ed91a36fc543089d327a5a888f6391.gif]: https://img-blog.csdnimg.cn/a4ed91a36fc543089d327a5a888f6391.gif
[68fc78ca13f04eef8cc3e90e3ec9109a.gif]: https://img-blog.csdnimg.cn/68fc78ca13f04eef8cc3e90e3ec9109a.gif
[286c6be5e83440c392174d6e3aaf1500.gif]: https://img-blog.csdnimg.cn/286c6be5e83440c392174d6e3aaf1500.gif
[0b197044065c40e5ae6d8be2b4aa72a0.gif]: https://img-blog.csdnimg.cn/0b197044065c40e5ae6d8be2b4aa72a0.gif
[Compose _ _ _ animateXxxAsState]: https://blog.csdn.net/EthanCo/article/details/128601647
[Compose _ _ _ _animateDpAsState_val _ MutableState_State_]: https://blog.csdn.net/EthanCo/article/details/128569226
[Compose _ _ _ AnimatedVisibility]: https://blog.csdn.net/EthanCo/article/details/129381503
[Compose _ _ _ animateContentSize _ animateEnterExit _ Crossfade _ AnimatedContent]: https://blog.csdn.net/EthanCo/article/details/129383017
[Compose _ _ _ _Transition]: https://blog.csdn.net/EthanCo/article/details/129398914
[Compose _ _ _ _ Animatable]: https://blog.csdn.net/EthanCo/article/details/129839270