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

news2024/11/25 17:18:47

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是淡出淡出的效果

我们使用上篇文章中的那段代码

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

效果如下所示
在这里插入图片描述

3. scaleIn / scaleOut

scaleIn / scaleOut是缩放的效果

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

效果如下所示
在这里插入图片描述

4. slideIn / SlideOut

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

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

效果如下所示
在这里插入图片描述

5. slideInVertically / slideOutVertically

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

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

效果如下所示
在这里插入图片描述

5.1 slideInHorizontally / slideOutHorizontally

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

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

效果如下所示
在这里插入图片描述

6. expandIn / shrinkOut

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

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

效果如下所示
在这里插入图片描述

6.1 expandVertically / shrinkVertically

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

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

效果如下所示
在这里插入图片描述

6.2 expandHorizontally / shrinkHorizontally

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

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

效果如下所示
在这里插入图片描述

7. 其他

7.1 Compose动画系列

Compose 动画系列，后续持续更新，可以先关注
Compose 动画 (一) : animateXxxAsState 实现放大/缩小/渐变等效果
Compose 动画 (二) : 为什么animateDpAsState要用val ? MutableState和State有什么区别 ?
Compose 动画 (三) : AnimatedVisibility 从入门到深入