使用Jetpack Compose中的动画效果很简单。下面的示例演示了如何在Jetpack Compose中使用动画效果实现View的大小变化,并设置持续时间。
@Composable
fun AnimatingView() {
var size by remember { mutableStateOf(100.dp) }
Surface(
modifier = Modifier.size(size),
color = Color.Blue,
shape = CircleShape
) {}
Button(
onClick = {
size = if (size == 100.dp) 200.dp else 100.dp
}
) {
Text("Change Size")
}
}
@ExperimentalAnimationApi
@Composable
fun AnimatedViewWithDuration() {
var size by remember { mutableStateOf(100.dp) }
AnimatedVisibility(
visible = true,
enter = fadeIn(animationSpec = tween(durationMillis = 2000)),
exit = fadeOut(animationSpec = tween(durationMillis = 2000)),
modifier = Modifier.size(size),
) {
Surface(
modifier = Modifier,
color = Color.Blue,
shape = CircleShape
) {}
Button(
onClick = {
size = if (size == 100.dp) 200.dp else 100.dp
}
) {
Text("Change Size")
}
}
}
在上述代码中,AnimatingView()包含了一个Surface和一个Button,用于改变Surface的大小。修改了Surface的大小后,它会自动动画效果过渡,并且可以循环切换。
AnimatedViewWithDuration()是使用Jetpack Compose中的AnimatedVisibility函数实现的动画效果示例。这里动画效果使用了fadeIn和fadeOut函数,并且设置了持续时间为2秒。当Surface的大小发生变化时,AnimatedVisibility函数会自动应用动画效果。
因此,在Jetpack Compose中实现View的动画效果非常简单,只需要使用它提供的动画函数和效果即可。