Compose 动画 (四) : AnimatedVisibility 各种入场和出场动画效果

红太狼 2023-10-09 15:51 60阅读 0赞

`AnimatedVisibility`中的`EnterTransition` 和`ExitTransition` ，用来配置`入场/出场`时候的动画效果。

默认的入场效果是 `fadeIn() + expandVertically()`  
默认的出场效果是 `fadeOut() + shrinkVertically()`

### 1. `EnterTransition`和`ExitTransition`支持的动画 ###

`enter`的参数类型是`EnterTransition`，支持这些动画

*  淡入 : `fade: fadeIn`
 *  缩放 : `scale: scaleIn`
 *  滑动 : `slide: slideIn, slideInHorizontally, slideInVertically`
 *  展开 : `expand: expandIn, expandHorizontally, expandVertically`

`exit`的参数类型是`EnterTransition`，支持这些动画

*  淡出 : `fade: fadeOut`
 *  缩放 : `scale: scaleOut`
 *  滑动 : `slide: slideOut, slideOutHorizontally, slideOutVertically`
 *  收缩 : `shrink: shrinkOut, shrinkHorizontally, shrinkVertically`

可以看到`EnterTransition`和`ExitTransition`支持的动画只有`expand`和`shrink`命名上有区别，  
其他都是对应的 `fadeIn` 和 `fadeOut`，`scaleIn` 和 `scaleOut`，`slideIn` 和 `slideOut`。  
`expand`和`shrink`命名上做区分，是因为`expand`就是`展开`的意思，而`shrink`是`收缩`的意思，它们其实就是相对应的。

### 2. fadeIn / fadeOut ###

`fadeIn / fadeOut`是淡出淡出的效果

我们使用[上篇文章][Link 1]中的那段代码

@Composable
    fun AnimatedVisibilityPage() {
        
        Column(horizontalAlignment = Alignment.CenterHorizontally) {
        
            var visible by remember {
        
                mutableStateOf(true)
            }
            AnimatedVisibility(visible = visible) {
        
    	        MyImage()
    	    }
            Spacer(modifier = Modifier.height(10.dp))
            Button(onClick = {
         visible = !visible }) {
        
                Text(text = "显示/隐藏")
            }
        }
    }
    
    @Composable
    private fun MyImage() {
        
        Image(
            painter = painterResource(id = R.mipmap.photot1),
            modifier = Modifier.width(300.dp),
            contentDescription = null
        )
    }

然后修改`AnimatedVisibility`，配置`enter`和`exit`

AnimatedVisibility(
        visible = visible,
        enter = fadeIn(),
        exit = fadeOut()
    ) {
        
        MyImage()
    }

效果如下所示  
![在这里插入图片描述][70f7238a410c47fabf03241feee5994a.gif]

### 3. scaleIn / scaleOut ###

`scaleIn / scaleOut`是缩放的效果

AnimatedVisibility(
        visible = visible,
        enter = scaleIn(),
        exit = scaleOut()
    ) {
        
        MyImage()
    }

效果如下所示  
![在这里插入图片描述][01ca5aef3b1d4178997470ddbe5855c2.gif]

#### 4. slideIn / SlideOut ####

`slideIn / SlideOut`是滑动的效果，这里进入的初始位置和退出的目标位置都设置为了`(300,-150)`，所以会从右上角进入/退出

AnimatedVisibility(
        visible = visible,
        enter = slideIn(initialOffset = {
        
            IntOffset(300, -150) }
        ),
        exit = slideOut(targetOffset = {
        
            IntOffset(300,-150) }
        )
    ) {
        
        MyImage()
    }

效果如下所示  
![在这里插入图片描述][09df5febd50f47c88014cef327c48ff1.gif]

### 5. slideInVertically / slideOutVertically ###

`slideInVertically / slideOutVertically`是垂直方向滑动进入/退出

AnimatedVisibility(
        visible = visible,
        enter = slideInVertically(),
        exit = slideOutVertically()
    ) {
        
        MyImage()
    }

效果如下所示  
![在这里插入图片描述][2a8b6d44e03745debcfa6a3f8629d961.gif]

#### 5.1 slideInHorizontally / slideOutHorizontally ####

`slideInHorizontally / slideOutHorizontally`是从横向方向滑动进入/退出

AnimatedVisibility(
        visible = visible,
        enter = slideInHorizontally(),
        exit = slideOutHorizontally()
    ) {
        
        MyImage()
    }

效果如下所示  
![在这里插入图片描述][81148a76ad7f44af95b92733f2507210.gif]

#### 6. expandIn / shrinkOut ####

`expandIn / shrinkOut`是`展开/收缩`的效果

AnimatedVisibility(
        visible = visible,
        enter = expandIn(),
        exit = shrinkOut()
    ) {
        
        MyImage()
    }

效果如下所示  
![在这里插入图片描述][978cd3bc3fbf4ade8365afea219fa28f.gif]

#### 6.1 expandVertically / shrinkVertically ####

`expandVertically / shrinkVertically`是从垂直方向`展开/收缩`

AnimatedVisibility(
        visible = visible,
        enter = expandVertically(),
        exit = shrinkVertically()
    ) {
        
        MyImage()
    }

效果如下所示  
![在这里插入图片描述][c4e4c0e3053a4d97af775296837ac315.gif]

#### 6.2 expandHorizontally / shrinkHorizontally ####

`expandHorizontally / shrinkHorizontally`是从横向方向`展开/收缩`

AnimatedVisibility(
        visible = visible,
        enter = expandHorizontally(),
        exit = shrinkHorizontally()
    ) {
        
        MyImage()
    }

效果如下所示  
![在这里插入图片描述][db90a49a6a20495b8c6e53b1af90f927.gif]

### 7. 其他 ###

#### 7.1 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]

#### 7.2 参考 ####

关于[EnterTransition 和 ExitTransition 示例也可以看这里][EnterTransition _ ExitTransition]

[Link 1]: https://blog.csdn.net/EthanCo/article/details/129268245
[70f7238a410c47fabf03241feee5994a.gif]: https://img-blog.csdnimg.cn/70f7238a410c47fabf03241feee5994a.gif
[01ca5aef3b1d4178997470ddbe5855c2.gif]: https://img-blog.csdnimg.cn/01ca5aef3b1d4178997470ddbe5855c2.gif
[09df5febd50f47c88014cef327c48ff1.gif]: https://img-blog.csdnimg.cn/09df5febd50f47c88014cef327c48ff1.gif
[2a8b6d44e03745debcfa6a3f8629d961.gif]: https://img-blog.csdnimg.cn/2a8b6d44e03745debcfa6a3f8629d961.gif
[81148a76ad7f44af95b92733f2507210.gif]: https://img-blog.csdnimg.cn/81148a76ad7f44af95b92733f2507210.gif
[978cd3bc3fbf4ade8365afea219fa28f.gif]: https://img-blog.csdnimg.cn/978cd3bc3fbf4ade8365afea219fa28f.gif
[c4e4c0e3053a4d97af775296837ac315.gif]: https://img-blog.csdnimg.cn/c4e4c0e3053a4d97af775296837ac315.gif
[db90a49a6a20495b8c6e53b1af90f927.gif]: https://img-blog.csdnimg.cn/db90a49a6a20495b8c6e53b1af90f927.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
[EnterTransition _ ExitTransition]: https://developer.android.google.cn/jetpack/compose/animation?hl=zh-cn#enter-exit-transition