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 从入门到深入
Compose 动画 (四) : AnimatedVisibility 各种入场和出场动画效果
Compose 动画 (五) : animateContentSize / animateEnterExit / Crossfade / AnimatedContent
Compose 动画 (六) : 使用Transition管理多个动画，实现动画预览
Compose 动画 (七) : 高可定制性的动画 Animatable