动画是界面交互重要的要素之一,为界面交互增添了活性,给人视觉上的享受。下面我们来使用Android Compose中的动画。在使用Compsose中的动画之前,我们需要先引入动画依赖:
// Animations 下面的version不唯一,本文中使用的是1.1.0
implementation 'androidx.compose.animation:animation:$version'
AnimatedVisibility(实验性API,以后可能会变化或移除)
AnimatedVisibility可组合项可为内容的出现和消失添加动画效果,出现动画(EnterTransition)有fadeIn、slideIn、slideInHorizontally、slideInVertically、scaleIn、expandIn、expandHorizontally、expandVertically;与之对应的消失动画(ExitTransition)有fadeOut、slideOut、slideOutHorizontally、slideOutVertically、scaleOut、shrinkOut、shrinkHorizontally、shrinkVertically。
一、基础动画
1.fadeIn和fadeOut
/**
* fadeIn和fadeOut
*/
@ExperimentalAnimationApi
@Composable
fun compose_21_fade(visible: Boolean) {
AnimatedVisibility(
visible = visible,
enter = fadeIn(),
exit = fadeOut()
) {
Image(painter = painterResource(id = R.drawable.flower), contentDescription = "")
}
}
2.slideIn和slideOut
@ExperimentalAnimationApi
@Composable
fun compose_21_slide(visible: Boolean) {
val density = LocalDensity.current
AnimatedVisibility(
visible = visible,
// enter = slideIn(
// // 起始位置
// initialOffset = { fullSize -> IntOffset(fullSize.width,fullSize.height) },
// ),
// exit = slideOut(
// // 目标位置
// targetOffset = { fullSize -> IntOffset(fullSize.width,fullSize.height) },
// )
// enter = slideInHorizontally(
// // 起始X坐标位置
// initialOffsetX = { fullWidth -> fullWidth }
// ),
// exit = slideOutHorizontally(
// // 目标X坐标位置
// targetOffsetX = { fullWidth -> fullWidth }
// )
enter = slideInVertically(
// 起始X坐标位置
initialOffsetY = { fullHeight -> fullHeight }
),
exit = slideOutVertically(
// 目标X坐标位置
targetOffsetY = { full