Compose 内置了许多动画机制，可能很难选择哪一个。以下是常见动画用例的列表。有关您可用的完整 API 选项集的详细信息，请阅读完整的 Compose 动画文档。
动画化常见可组合属性
Compose 提供了方便的 API，允许您解决许多常见的动画用例。本节演示如何动画化可组合的常见属性。
动画化出现/消失
使用 AnimatedVisibility 来隐藏或显示可组合元素。AnimatedVisibility 内部的子元素可以使用 Modifier.animateEnterExit() 来执行它们自己的进入或退出过渡。
var visible by remember {
mutableStateOf(true)
}
// Animated visibility will eventually remove the item from the composition once the animation has finished.
AnimatedVisibility(visible) {
// your composable here
// ...
}
AnimatedVisibility 的进入和退出参数允许您配置可组合元素在出现和消失时的行为方式。阅读 完整文档 以了解更多信息。
动画化可组合元素可见性的另一种方法是使用 animateFloatAsState 随着时间的推移动画化 alpha 值。
var visible by remember {
mutableStateOf(true)
}
val animatedAlpha by animateFloatAsState(
targetValue = if (visible) 1.0f else 0f,
label = "alpha"
)
Box(
modifier = Modifier
.size(200.dp)
.graphicsLayer {
alpha = animatedAlpha
}
.clip(RoundedCornerShape(8.dp))
.background(colorGreen)
.align(Alignment.TopCenter)
) {
}
但是，更改 alpha 值有一个缺点，即可组合元素仍然存在于组合中，并继续占据它所占据的空间。这可能会导致屏幕阅读器和其他辅助功能机制仍然认为该项目在屏幕上。另一方面，AnimatedVisibility 最终会从组合中删除该项目。
动画化背景颜色
val animatedColor by animateColorAsState(
if (animateBackgroundColor) colorGreen else colorBlue,
label = "color"
)
Column(
modifier = Modifier.drawBehind {
drawRect(animatedColor)
}
) {
// your composable here
}
此选项比使用 Modifier.background() 性能更高。Modifier.background() 适用于一次性颜色设置，但当随着时间的推移动画化颜色时，这可能会导致比必要更多的重新组合。
要无限地动画化背景颜色，请参见 重复动画部分。
动画化可组合元素的大小
Compose 允许您以几种不同的方式动画化可组合元素的大小。使用 animateContentSize() 来实现可组合元素大小变化之间的动画。
例如，如果您有一个包含文本的框，该文本可以从一行扩展到多行，您可以使用 Modifier.animateContentSize() 来实现更平滑的过渡。
var expanded by remember { mutableStateOf(false) }
Box(
modifier = Modifier
.background(colorBlue)
.animateContentSize()
.height(if (expanded) 400.dp else 200.dp)
.fillMaxWidth()
.clickable(
interactionSource = remember { MutableInteractionSource() },
indication = null
) {
expanded = !expanded
}
) {
}
您也可以使用 AnimatedContent，并使用 SizeTransform 来描述大小变化应该如何发生。
动画化可组合元素的位置
要动画化可组合元素的位置，请使用 Modifier.offset{ } 与 animateIntOffsetAsState() 结合使用。
var moved by remember { mutableStateOf(false) }
val pxToMove = with(LocalDensity.current) {
100.dp.toPx().roundToInt()
}
val offset by animateIntOffsetAsState(
targetValue = if (moved) {
IntOffset(pxToMove, pxToMove)
} else {
IntOffset.Zero
},
label = "offset"
)
Box(
modifier = Modifier
.offset {
offset
}
.background(colorBlue)
.size(100.dp)
.clickable(
interactionSource = remember { MutableInteractionSource() },
indication = null
) {
moved = !moved
}
)
如果您想确保在动画化位置或大小变化时，可组合元素不会覆盖或重叠其他可组合元素，请使用 Modifier.layout{ }。此修饰符会将大小和位置变化传播给父元素，然后影响其他子元素。
例如，如果您在 Column 中移动一个 Box，而其他子元素需要在 Box 移动时移动，请将偏移信息包含在 Modifier.layout{ } 中，如下所示
var toggled by remember {
mutableStateOf(false)
}
val interactionSource = remember {
MutableInteractionSource()
}
Column(
modifier = Modifier
.padding(16.dp)
.fillMaxSize()
.clickable(indication = null, interactionSource = interactionSource) {
toggled = !toggled
}
) {
val offsetTarget = if (toggled) {
IntOffset(150, 150)
} else {
IntOffset.Zero
}
val offset = animateIntOffsetAsState(
targetValue = offsetTarget, label = "offset"
)
Box(
modifier = Modifier
.size(100.dp)
.background(colorBlue)
)
Box(
modifier = Modifier
.layout { measurable, constraints ->
val offsetValue = if (isLookingAhead) offsetTarget else offset.value
val placeable = measurable.measure(constraints)
layout(placeable.width + offsetValue.x, placeable.height + offsetValue.y) {
placeable.placeRelative(offsetValue)
}
}
.size(100.dp)
.background(colorGreen)
)
Box(
modifier = Modifier
.size(100.dp)
.background(colorBlue)
)
}
Modifier.layout{ } 动画化动画化可组合元素的填充
要动画化可组合元素的填充，请使用 animateDpAsState 与 Modifier.padding() 结合使用。
var toggled by remember {
mutableStateOf(false)
}
val animatedPadding by animateDpAsState(
if (toggled) {
0.dp
} else {
20.dp
},
label = "padding"
)
Box(
modifier = Modifier
.aspectRatio(1f)
.fillMaxSize()
.padding(animatedPadding)
.background(Color(0xff53D9A1))
.clickable(
interactionSource = remember { MutableInteractionSource() },
indication = null
) {
toggled = !toggled
}
)
动画化可组合元素的海拔
要动画化可组合元素的海拔，请使用 animateDpAsState 与 Modifier.graphicsLayer{ } 结合使用。对于一次性海拔变化，请使用 Modifier.shadow()。如果您正在动画化阴影，使用 Modifier.graphicsLayer{ } 修饰符是性能更高的选择。
val mutableInteractionSource = remember {
MutableInteractionSource()
}
val pressed = mutableInteractionSource.collectIsPressedAsState()
val elevation = animateDpAsState(
targetValue = if (pressed.value) {
32.dp
} else {
8.dp
},
label = "elevation"
)
Box(
modifier = Modifier
.size(100.dp)
.align(Alignment.Center)
.graphicsLayer {
this.shadowElevation = elevation.value.toPx()
}
.clickable(interactionSource = mutableInteractionSource, indication = null) {
}
.background(colorGreen)
) {
}
或者，使用 Card 可组合元素，并将海拔属性设置为不同状态下的不同值。
动画化文本缩放、平移或旋转
当动画化文本的缩放、平移或旋转时，将 TextStyle 上的 textMotion 参数设置为 TextMotion.Animated。这将确保文本动画之间更平滑的过渡。使用 Modifier.graphicsLayer{ } 来平移、旋转或缩放文本。
val infiniteTransition = rememberInfiniteTransition(label = "infinite transition")
val scale by infiniteTransition.animateFloat(
initialValue = 1f,
targetValue = 8f,
animationSpec = infiniteRepeatable(tween(1000), RepeatMode.Reverse),
label = "scale"
)
Box(modifier = Modifier.fillMaxSize()) {
Text(
text = "Hello",
modifier = Modifier
.graphicsLayer {
scaleX = scale
scaleY = scale
transformOrigin = TransformOrigin.Center
}
.align(Alignment.Center),
// Text composable does not take TextMotion as a parameter.
// Provide it via style argument but make sure that we are copying from current theme
style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated)
)
}
动画化文本颜色
要动画化文本颜色，请在 BasicText 可组合元素上使用 color lambda 表达式。
val infiniteTransition = rememberInfiniteTransition(label = "infinite transition")
val animatedColor by infiniteTransition.animateColor(
initialValue = Color(0xFF60DDAD),
targetValue = Color(0xFF4285F4),
animationSpec = infiniteRepeatable(tween(1000), RepeatMode.Reverse),
label = "color"
)
BasicText(
text = "Hello Compose",
color = {
animatedColor
},
// ...
)
在不同类型的內容之间切换
使用 AnimatedContent 来动画化不同可组合元素之间的变化，如果您只需要在可组合元素之间进行标准淡入淡出，请使用 Crossfade。
var state by remember {
mutableStateOf(UiState.Loading)
}
AnimatedContent(
state,
transitionSpec = {
fadeIn(
animationSpec = tween(3000)
) togetherWith fadeOut(animationSpec = tween(3000))
},
modifier = Modifier.clickable(
interactionSource = remember { MutableInteractionSource() },
indication = null
) {
state = when (state) {
UiState.Loading -> UiState.Loaded
UiState.Loaded -> UiState.Error
UiState.Error -> UiState.Loading
}
},
label = "Animated Content"
) { targetState ->
when (targetState) {
UiState.Loading -> {
LoadingScreen()
}
UiState.Loaded -> {
LoadedScreen()
}
UiState.Error -> {
ErrorScreen()
}
}
}
AnimatedContent 可以自定义以显示许多不同类型的进入和退出过渡。有关更多信息，请阅读有关 AnimatedContent 的文档或阅读这篇 博客文章，主题为 AnimatedContent。
在导航到不同目标时动画化
要在使用 导航组合 工件时动画化可组合元素之间的过渡，请在可组合元素上指定 enterTransition 和 exitTransition。您也可以在顶层 NavHost 上设置用于所有目标的默认动画。
val navController = rememberNavController()
NavHost(
navController = navController, startDestination = "landing",
enterTransition = { EnterTransition.None },
exitTransition = { ExitTransition.None }
) {
composable("landing") {
ScreenLanding(
// ...
)
}
composable(
"detail/{photoUrl}",
arguments = listOf(navArgument("photoUrl") { type = NavType.StringType }),
enterTransition = {
fadeIn(
animationSpec = tween(
300, easing = LinearEasing
)
) + slideIntoContainer(
animationSpec = tween(300, easing = EaseIn),
towards = AnimatedContentTransitionScope.SlideDirection.Start
)
},
exitTransition = {
fadeOut(
animationSpec = tween(
300, easing = LinearEasing
)
) + slideOutOfContainer(
animationSpec = tween(300, easing = EaseOut),
towards = AnimatedContentTransitionScope.SlideDirection.End
)
}
) { backStackEntry ->
ScreenDetails(
// ...
)
}
}
有许多不同类型的进入和退出过渡，它们对传入和传出的内容应用不同的效果，请参见 文档 了解详情。
重复动画
使用 rememberInfiniteTransition 与 infiniteRepeatable animationSpec 结合使用，以连续重复您的动画。更改 RepeatModes 来指定它应该如何来回移动。
使用 finiteRepeatable 来重复一定次数。
val infiniteTransition = rememberInfiniteTransition(label = "infinite")
val color by infiniteTransition.animateColor(
initialValue = Color.Green,
targetValue = Color.Blue,
animationSpec = infiniteRepeatable(
animation = tween(1000, easing = LinearEasing),
repeatMode = RepeatMode.Reverse
),
label = "color"
)
Column(
modifier = Modifier.drawBehind {
drawRect(color)
}
) {
// your composable here
}
在启动可组合元素时启动动画
LaunchedEffect 在可组合元素进入组合时运行。它在启动可组合元素时启动动画，您可以使用它来驱动动画状态变化。使用 Animatable 与 animateTo 方法结合使用，以便在启动时启动动画。
val alphaAnimation = remember {
Animatable(0f)
}
LaunchedEffect(Unit) {
alphaAnimation.animateTo(1f)
}
Box(
modifier = Modifier.graphicsLayer {
alpha = alphaAnimation.value
}
)
创建顺序动画
使用 Animatable 协程 API 来执行顺序或并发动画。在 Animatable 上依次调用 animateTo 会导致每个动画在继续之前等待之前的动画完成。这是因为它是一个挂起函数。
val alphaAnimation = remember { Animatable(0f) }
val yAnimation = remember { Animatable(0f) }
LaunchedEffect("animationKey") {
alphaAnimation.animateTo(1f)
yAnimation.animateTo(100f)
yAnimation.animateTo(500f, animationSpec = tween(100))
}
创建并发动画
使用协程 API（Animatable#animateTo() 或 animate），或使用 Transition API 来实现并发动画。如果您在协程上下文中使用多个启动函数，它会同时启动这些动画。
val alphaAnimation = remember { Animatable(0f) }
val yAnimation = remember { Animatable(0f) }
LaunchedEffect("animationKey") {
launch {
alphaAnimation.animateTo(1f)
}
launch {
yAnimation.animateTo(100f)
}
}
您可以使用 updateTransition API 来使用相同的状态同时驱动许多不同的属性动画。下面的示例使用状态更改来动画化两个属性 rect 和 borderWidth。
var currentState by remember { mutableStateOf(BoxState.Collapsed) }
val transition = updateTransition(currentState, label = "transition")
val rect by transition.animateRect(label = "rect") { state ->
when (state) {
BoxState.Collapsed -> Rect(0f, 0f, 100f, 100f)
BoxState.Expanded -> Rect(100f, 100f, 300f, 300f)
}
}
val borderWidth by transition.animateDp(label = "borderWidth") { state ->
when (state) {
BoxState.Collapsed -> 1.dp
BoxState.Expanded -> 0.dp
}
}
优化动画性能
Compose 中的动画可能会导致性能问题。这是由于动画的本质：快速地逐帧移动或更改屏幕上的像素，以创建运动的假象。
请考虑 Compose 的不同阶段：组合、布局和绘制。如果您的动画更改了布局阶段，则它需要所有受影响的可组合元素重新布局和重新绘制。如果您的动画发生在绘制阶段，则默认情况下，它的性能会比在布局阶段运行动画要高，因为它需要完成的工作更少。
为了确保您的应用程序在动画过程中尽可能少地做额外工作，请尽可能选择 Modifier 的 lambda 版本。这将跳过重组，并在组合阶段之外执行动画，否则请使用 Modifier.graphicsLayer{ }，因为此修饰符始终在绘制阶段运行。有关更多信息，请参阅性能文档中的 延迟读取 部分。
更改动画时间
Compose 默认情况下对大多数动画使用 **弹簧** 动画。弹簧，或基于物理的动画，感觉更自然。它们也是可中断的，因为它们考虑了物体的当前速度，而不是固定的时间。如果您想覆盖默认值，上面演示的所有动画 API 都可以设置 animationSpec 来自定义动画的运行方式，无论您是希望它在特定时间内执行还是更具弹性。
以下是不同 animationSpec 选项的总结
spring：基于物理的动画，是所有动画的默认选项。您可以更改 stiffness 或 dampingRatio 以实现不同的动画外观和感觉。tween（ **between** 的简称）：基于时间的动画，使用Easing函数在两个值之间进行动画。keyframes：用于在动画中的特定关键点指定值的规范。repeatable：基于时间的规范，运行特定次数，由RepeatMode指定。infiniteRepeatable：基于时间的规范，永远运行。snap：立即跳到结束值，没有任何动画。
阅读完整文档以获取有关 animationSpecs 的更多信息。
其他资源
有关 Compose 中有趣动画的更多示例，请查看以下内容