Jetpack Compose - AnimatedVisibility

- 0、介绍
- 1、属性一览
- 2、使用示例
- 3、版本更新
- 4、未解决问题

Compose系列文章，请点原文阅读。原文，是时候学习Compose了！

这篇文章之后就是重点学习下动画相关的内容了，Compose的动画和xml的各种动画等有很大的不同了，不要拘束于之前的想法。

目前动画还在实验阶段，所以我们浅入浅出，不做过多的研究。

0、介绍

首先官方给了我们一个开箱即用的动画函数 AnimatedVisibility，先来看先官方给它的定义：

随着可见值的变化，AnimatedVisibility可为其内容的出现和消失设置动画。

可以在enter和exit中为内容定义不同的EnterTransitions和ExitTransitions。 EnterTransition和ExitTransition共有3种类型：淡入淡出，展开/收缩和滑动。

1、属性一览

【目前基于alpha08版本】请看该函数：

@Composable fun AnimatedVisibility(
    visible: Boolean, 
    modifier: Modifier = Modifier, 
    enter: EnterTransition = fadeIn() + expandIn(), 
    exit: ExitTransition = shrinkOut() + fadeOut(), 
    initiallyVisible: Boolean = visible, 
    content: () -> Unit
): Unit

属性参数含义：

参数	含义
modifier: Modifier = Modifier	应用于布局的修饰符
visible: Boolean	定义内容项是否可见
enter: EnterTransition = fadeIn() + expandIn()	入场动画，默认逐渐淡入
exit: ExitTransition = shrinkOut() + fadeOut()	出场动画，默认逐渐淡出
initiallyVisible: Boolean = visible	控制是否对入场动画进行处理，默认情况下不处理（即不对入场动画做处理，默认是不可见的）
content: () -> Unit	子级内容区域，也就是你做动画的控件或布局

根据上述属性，我们可以了解，官方帮我们定义了入场和出场的基本动画，来看下默认的动画一共有多少，在androidx.compose.animation.EnterExitTransition.kt文件中：

fadeIn
fadeOut
slideIn
slideOut
expandIn
shrinkOut
expandHorizontally
expandVertically
shrinkHorizontally
shrinkVertically
slideInHorizontally
slideInVertically
slideOutHorizontally
slideOutVertically

基本就这些了，就是上文提到的淡入淡出，展开/收缩和滑动这么几种，只不过官方提供了各个方向上的函数，关于函数的具体功能请查看源码，比如说slideInHorizontally，它默认从左侧划入，并且默认的偏移量是你内容的宽度，请看下文的第二个示例。

2、使用示例

我们直接使用函数来实现下默认的动画效果，代码如下：

@ExperimentalAnimationApi
@Composable
fun AnimatedVisibilityDemo() {

    val visible = remember { mutableStateOf(false) }

    Column(modifier = Modifier.padding(16.dp)) {
        Text(
            text =
            if (visible.value) {
                "出场动画"
            } else {
                "入场动画"
            },
            modifier = Modifier
                .clickable(onClick = {
                    visible.value = !visible.value
                })
        )
        AnimatedVisibility(
            visible = visible.value,
        ) {
            Text(
                text = "Compose is coming!",
                fontSize = 32.sp
            )
        }
    }
}

首先注意下试验性质的注解@ExperimentalAnimationApi，不标记的话无法运行。因为我们需要控制动画的入场和出场，所以我们需要一个状态值visible，然后用文本的点击事件控制动画的入场和出场，效果如下所示：

Jetpack Compose - AnimatedVisibility

OK，是不是超级简单，那我想改为从左到右逐渐淡入入场呢，直接看AnimatedVisibility函数，在enter参数中我们指定了两个动画效果【水平滑入 + 淡入】，使用 “+” 号就可以组合多个动画效果。然后在exit函数中我们使用了【水平滑出+ 淡出】的效果，代码如下：

AnimatedVisibility(
            visible = visible.value,
            enter = slideInHorizontally() + fadeIn(),
            exit = slideOutHorizontally() + fadeOut()
        ) {
            Text(
                text = "Compose is coming!",
                fontSize = 32.sp
            )
        }

效果如下:

Jetpack Compose - AnimatedVisibility

3、版本更新

暂无

4、未解决问题

目前我们只是实现了最基本的动画效果，暂时还没找到如何控制动画的速率，像原来动画中的估值器和插值器。实际使用中，还有一些是lottie动画svg动画等，期待官方的解决方案。

Jetpack Compose - AnimatedVisibility