Compose 中的动画快速指南

Compose 具有许多内置的动画机制， 不知道该选择哪一个下面列出了常见的动画用例。对于 有关全部不同 API 选项的更多详细信息。 请阅读完整的 Compose 动画文档。

为常见可组合项属性添加动画效果

Compose 提供了便捷的 API，您可以通过这些 API 解决许多常见的问题， 动画用例。本部分将演示如何为常见 可组合项的属性。

以动画形式出现 / 消失

绿色可组合项显示和隐藏自身
图 1. 为 Column 中某个项的出现和消失添加动画效果

使用 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
    // ...
}
AnimationQuickGuide.kt

借助 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)
) {
}
AnimationQuickGuide.kt

不过，更改 Alpha 值后，需要注意的是，可组合项仍会保留 ，并且继续占据其布局空间。本次 可能会导致屏幕阅读器和其他无障碍机制仍然考虑 屏幕上呈现的内容另一方面，AnimatedVisibility 最终会移除 组合中的项。

为可组合项的 Alpha 添加动画效果
图 2. 为可组合项的 Alpha 添加动画效果

以动画形式呈现背景颜色

背景颜色以动画形式随时间变化的可组合项，其中颜色会彼此淡入。
图 3. 为可组合项的背景颜色添加动画效果

val animatedColor by animateColorAsState(
    if (animateBackgroundColor) colorGreen else colorBlue,
    label = "color"
)
Column(
    modifier = Modifier.drawBehind {
        drawRect(animatedColor)
    }
) {
    // your composable here
}
AnimationQuickGuide.kt

此选项的性能比使用 Modifier.background() 更高。 Modifier.background() 适用于单次色彩设置， 为颜色添加动画效果，可能会导致重组次数 。

要为背景颜色添加无限的动画效果，请参见重复动画 部分。

为可组合项的尺寸添加动画效果

为大小变化平滑的绿色可组合项。
图 4. 可组合项在小尺寸和大尺寸之间流畅播放动画

借助 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
        }

) {
}
AnimationQuickGuide.kt

您也可以使用 AnimatedContent，并带有 SizeTransform 来描述 如何更改大小

为可组合项的位置添加动画效果

绿色可组合项平滑地向下和向右呈现动画效果
图 5. 可组合项按偏移量移动

如需为可组合项的位置添加动画效果，请将 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
        }
)
AnimationQuickGuide.kt

如果您想确保可组合项不会在其他 为位置或大小添加动画效果时，请使用 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)
    )
}
AnimationQuickGuide.kt

2 个框，其中第二个框为其 X、Y 位置添加动画效果，第三个框也通过自行移动 Y 量来做出响应。
图 6. 使用 Modifier.layout{ } 添加动画效果

为可组合项的内边距添加动画效果

绿色可组合项在用户点击时变得越来越小，并且内边距以动画形式呈现
图 7. 可组合项的内边距会呈现动画效果

如需为可组合项的内边距添加动画效果，请将 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
        }
)
AnimationQuickGuide.kt

为可组合项的高度添加动画效果

图 8.在点击时呈现可组合项的高度动画效果

如需为可组合项的高度添加动画效果，请将 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)
) {
}
AnimationQuickGuide.kt

或者，使用 Card 可组合项，并将高度属性设为 每个州的值不同

为文本缩放、平移或旋转添加动画效果

Text 可组合项说
图 9. 在两种尺寸之间流畅显示文本动画

在为文本的缩放、平移或旋转添加动画效果时，请设置 textMotion 将 TextStyle 的参数设置为 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)
    )
}

AnimationQuickGuide.kt

为文本颜色添加动画效果

字词
图 10. 展示以动画形式呈现文本颜色的示例

如需为文本颜色添加动画效果，请在 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
    },
    // ...
)
AnimationQuickGuide.kt

在不同类型的内容之间切换

绿幕说
图 11. 使用 AnimatedContent 为不同可组合项之间的变化添加动画效果（慢速）

使用 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()
        }
    }
}
AnimationQuickGuide.kt

您可以对AnimatedContent进行自定义，以显示多种不同的输入和 退出过渡。有关详情，请参阅 AnimatedContent或阅读此博文 AnimatedContent。

在导航到不同目的地时呈现动画效果

两个可组合项，一个绿色表示“着陆页”，另一个蓝色表示“详细信息”，通过在“着陆页”可组合项上滑动详情可组合项来呈现动画效果。
图 12. 使用 navigation-compose 在可组合项之间添加动画效果

如需在使用 navigation-compose 工件，指定 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(
            // ...
        )
    }
}
AnimationQuickGuide.kt

可以应用多种不同的进入和退出过渡类型 来调整传入和传出内容的效果，请参阅 文档了解详情。

重复播放动画

通过在两种颜色之间添加动画效果，无限转换为蓝色背景的绿色背景。
图 13. 在两个值之间无限添加动画效果

将 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
}
AnimationQuickGuide.kt

在可组合项启动时启动动画

LaunchedEffect 在可组合项进入组合时运行。它的开始时间是 启动可组合项时的动画，您可以使用它来驱动动画 状态更改结合使用 Animatable 和 animateTo 方法启动 启动时的动画：

val alphaAnimation = remember {
    Animatable(0f)
}
LaunchedEffect(Unit) {
    alphaAnimation.animateTo(1f)
}
Box(
    modifier = Modifier.graphicsLayer {
        alpha = alphaAnimation.value
    }
)
AnimationQuickGuide.kt

创建依序动画

四个圆圈，每个圆圈之间有绿色箭头，一个接一个地呈现动画效果。
图 14. 指示依序动画如何逐个播放的示意图。

使用 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))
}
AnimationQuickGuide.kt

创建并发动画

三个圆圈，其中绿色箭头指向每个圆圈，同时全部呈现动画效果。
图 15.显示并发动画如何同时进度的图表。

使用协程 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)
    }
}
AnimationQuickGuide.kt

您可以使用 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
    }
}
AnimationQuickGuide.kt

优化动画性能

Compose 中的动画可能会导致性能问题。这是由于 快速移动或更改屏幕上的像素 来创造移动的错觉

考虑 Compose 的不同阶段：组合、布局和绘制。如果 您的动画会更改布局阶段，因此需要所有受影响的可组合项 重新布局和绘制。如果动画发生在绘制阶段 默认比在布局中运行动画时性能更佳 因为总体上要做的工作更少。

为了确保您的应用在添加动画时尽可能少执行相关操作，请选择 lambda Modifier 版本（如有可能）。这会跳过重组并执行 组合阶段之外的动画，否则使用 Modifier.graphicsLayer{ }，因为此修饰符始终在绘制中运行 阶段。如需了解详情，请参阅 API 中的延迟读取部分 请参阅性能文档

更改动画时间设置

默认情况下，Compose 对大多数动画使用 spring 动画。Springs 或 基于物理特性的动画，让您感觉更自然。它们还可以被 它们会考虑物体的当前速度，而不是固定时间。 如果要替换默认值，可以使用上面演示的所有动画 API 能够设置 animationSpec 以自定义动画的运行方式， 是希望它在一定的时间内执行，还是提高跳动性

下面简要介绍了不同的 animationSpec 选项：

  • spring：基于物理特性的动画，所有动画的默认设置。您 通过改变刚度或 dampingRatio 外观。
  • tween（“介于”的缩写）：基于时长的动画，以动画形式呈现 使用 Easing 函数在两个值之间移动。
  • keyframes：用于在 动画。
  • repeatable：基于时长的规范，会运行一定次数； 由 RepeatMode 指定。
  • infiniteRepeatable：基于时长的规范，永远有效。
  • snap：即时贴靠结束值，而不使用任何动画。
在此处撰写您的替代文本
图 16.未设置与自定义弹簧规格集相比

如需详细了解 AnimationSpecs，请参阅完整文档。

其他资源

如需查看 Compose 中有趣动画的更多示例，请查看以下内容：

上一页
选择动画 API
下一页
动画修饰符和可组合项