Compose 具有许多内置的动画机制, 不知道该选择哪一个下面列出了常见的动画用例。对于 有关全部不同 API 选项的更多详细信息。 请阅读完整的 Compose 动画文档。
为常见可组合项属性添加动画效果
Compose 提供了便捷的 API,您可以通过这些 API 解决许多常见的问题, 动画用例。本部分将演示如何为常见 可组合项的属性。
以动画形式出现 / 消失
![绿色可组合项显示和隐藏自身](https://developer.android.google.cn/static/develop/ui/compose/images/animations/animated_visibility_column.gif?authuser=7&hl=sr)
使用 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
最终会移除
组合中的项。
![为可组合项的 Alpha 添加动画效果](https://developer.android.google.cn/static/develop/ui/compose/images/animations/animated_visibility_alpha.gif?authuser=7&hl=sr)
以动画形式呈现背景颜色
![背景颜色以动画形式随时间变化的可组合项,其中颜色会彼此淡入。](https://developer.android.google.cn/static/develop/ui/compose/images/animations/animated_forever.gif?authuser=7&hl=sr)
val animatedColor by animateColorAsState( if (animateBackgroundColor) colorGreen else colorBlue, label = "color" ) Column( modifier = Modifier.drawBehind { drawRect(animatedColor) } ) { // your composable here }
此选项的性能比使用 Modifier.background()
更高。
Modifier.background()
适用于单次色彩设置,
为颜色添加动画效果,可能会导致重组次数
。
要为背景颜色添加无限的动画效果,请参见重复动画 部分。
为可组合项的尺寸添加动画效果
![为大小变化平滑的绿色可组合项。](https://developer.android.google.cn/static/develop/ui/compose/images/animations/animated_content_size.gif?authuser=7&hl=sr)
借助 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
来描述
如何更改大小
为可组合项的位置添加动画效果
![绿色可组合项平滑地向下和向右呈现动画效果](https://developer.android.google.cn/static/develop/ui/compose/images/animations/animated_offset.gif?authuser=7&hl=sr)
如需为可组合项的位置添加动画效果,请将 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) ) }
![2 个框,其中第二个框为其 X、Y 位置添加动画效果,第三个框也通过自行移动 Y 量来做出响应。](https://developer.android.google.cn/static/develop/ui/compose/images/animations/animated_layout_modifier.gif?authuser=7&hl=sr)
Modifier.layout{ }
添加动画效果为可组合项的内边距添加动画效果
![绿色可组合项在用户点击时变得越来越小,并且内边距以动画形式呈现](https://developer.android.google.cn/static/develop/ui/compose/images/animations/animated_padding.gif?authuser=7&hl=sr)
如需为可组合项的内边距添加动画效果,请将 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
可组合项,并将高度属性设为
每个州的值不同
为文本缩放、平移或旋转添加动画效果
![Text 可组合项说](https://developer.android.google.cn/static/develop/ui/compose/images/animations/animated_text.gif?authuser=7&hl=sr)
在为文本的缩放、平移或旋转添加动画效果时,请设置 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) ) }
为文本颜色添加动画效果
![字词](https://developer.android.google.cn/static/develop/ui/compose/images/animations/animated_text_color.gif?authuser=7&hl=sr)
如需为文本颜色添加动画效果,请在 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 }, // ... )
在不同类型的内容之间切换
![绿幕说](https://developer.android.google.cn/static/develop/ui/compose/images/animations/animated_content_slower.gif?authuser=7&hl=sr)
使用 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
。
在导航到不同目的地时呈现动画效果
![两个可组合项,一个绿色表示“着陆页”,另一个蓝色表示“详细信息”,通过在“着陆页”可组合项上滑动详情可组合项来呈现动画效果。](https://developer.android.google.cn/static/develop/ui/compose/images/animations/navigation_compose_animation.gif?authuser=7&hl=sr)
如需在使用
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( // ... ) } }
可以应用多种不同的进入和退出过渡类型 来调整传入和传出内容的效果,请参阅 文档了解详情。
重复播放动画
![通过在两种颜色之间添加动画效果,无限转换为蓝色背景的绿色背景。](https://developer.android.google.cn/static/develop/ui/compose/images/animations/animated_forever.gif?authuser=7&hl=sr)
将 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 } )
创建依序动画
![四个圆圈,每个圆圈之间有绿色箭头,一个接一个地呈现动画效果。](https://developer.android.google.cn/static/develop/ui/compose/images/animations/multiple_properties_sequential.gif?authuser=7&hl=sr)
使用 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)) }
创建并发动画
<ph type="x-smartling-placeholder">![三个圆圈,其中绿色箭头指向每个圆圈,同时全部呈现动画效果。](https://developer.android.google.cn/static/develop/ui/compose/images/animations/multiple_properties.gif?authuser=7&hl=sr)
使用协程 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 的不同阶段:组合、布局和绘制。如果 您的动画会更改布局阶段,因此需要所有受影响的可组合项 重新布局和绘制。如果动画发生在绘制阶段 默认比在布局中运行动画时性能更佳 因为总体上要做的工作更少。
为了确保您的应用在添加动画时尽可能少执行相关操作,请选择 lambda
Modifier
版本(如有可能)。这会跳过重组并执行
组合阶段之外的动画,否则使用
Modifier.graphicsLayer{ }
,因为此修饰符始终在绘制中运行
阶段。如需了解详情,请参阅 API 中的延迟读取部分
请参阅性能文档
更改动画时间设置
默认情况下,Compose 对大多数动画使用 spring 动画。Springs 或
基于物理特性的动画,让您感觉更自然。它们还可以被
它们会考虑物体的当前速度,而不是固定时间。
如果要替换默认值,可以使用上面演示的所有动画 API
能够设置 animationSpec
以自定义动画的运行方式,
是希望它在一定的时间内执行,还是提高跳动性
下面简要介绍了不同的 animationSpec
选项:
spring
:基于物理特性的动画,所有动画的默认设置。您 通过改变刚度或 dampingRatio 外观。tween
(“介于”的缩写):基于时长的动画,以动画形式呈现 使用Easing
函数在两个值之间移动。keyframes
:用于在 动画。repeatable
:基于时长的规范,会运行一定次数; 由RepeatMode
指定。infiniteRepeatable
:基于时长的规范,永远有效。snap
:即时贴靠结束值,而不使用任何动画。
![在此处撰写您的替代文本](https://developer.android.google.cn/static/develop/ui/compose/images/animations/animated_spec_set.gif?authuser=7&hl=sr)
如需详细了解 AnimationSpecs,请参阅完整文档。
其他资源
如需查看 Compose 中有趣动画的更多示例,请查看以下内容: