点读软件网站建设,如何线上推广自己产品,社交网站备案,衡水网站建费用AnimatedVisibility中的EnterTransition 和 ExitTransition #xff0c;用来配置入场/出场时候的动画效果。
默认的入场效果是 fadeIn() expandVertically() 默认的出场效果是 fadeOut() shrinkVertically()
1. EnterTransition和ExitTransition支持的动画
enter的参数类…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 和 fadeOutscaleIn 和 scaleOutslideIn 和 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 从入门到深入
7.2 参考
关于EnterTransition 和 ExitTransition 示例也可以看这里
