按理说，

在 Compose 中。你可能会遇到数字变化时跳跃过大、动画不连贯或者占位空间不足导致内容被裁剪的问题。AnimatedContent 能帮你把旧数字与新数字做一个平滑交替的过渡，让使用者感觉到一种丝滑的递增或递减过程。

AnimatedContent 的主要签名

public fun  AnimatedContent(
targetState: S,modifier: Modifier = Modifier。transitionSpec: AnimatedContentTransitionScope.<> -> ContentTransform = {
delayMillis = ... ) +
scaleIn,delayMillis = ...))
.togerWith))
},contentAlignment: Alignment = Alignment.TopStart,label: String = "AnimatedContent",contentKey: -> Any?= { it },content: @Composable AnimatedContentScope. -> Unit,)

说到关键点。

• targetState新的内容值，触发时旧内容先执行退出动画，后者再进入。怎么说呢，
• transitionSpec描述旧内容如何离开。新内容如何进来支持根据旧状态和新状态动态决定动画。
• contentKey默认使用完整状态做 key，只有 key 改变才会触发过渡。

为什么要用 AnimatedContent 而不是简单的 animateAsState？

如果只是单个属性变化，animate*AsState 更简洁；但当“身份”发生改变，且你想让两者同时存在并完成交接时AnimatedContent 是更合适的选择。

基础计数器实现

A simple counter only needs an integer state and two buttons to increment/decrement.

var count by remember { mutableIntStateOf }
Box(
modifier = Modifier
.fillMaxWidth
.height
.clip)
.background)。contentAlignment = Alignment.Center
) {
AnimatedContent(
targetState = count,transitionSpec = { /* defined later */ },label = "counter"
) { value ->
Text(
text = "$value",fontSize = 48.sp,fontWeight = FontWeight.Bold,color = Color
)
}
}

User Pain Point: 如果容器高度随文字收缩，滑动动画会被裁剪，导致视觉突兀。此处我们固定了 .height 来保证足够的上下空间。

调参列表

• ”slideDurationMs”: 滑动时长 ms
• ”fadeDurationMs”: 淡入淡出时长 ms
• ”slideOffsetDivisor”: 控制相对高度位移比例

描述进入和退出动画细节

常见痛点的观点是，"数字从上往下跳转很生硬"

方法是根据方向动态选择初始/结束偏移：

val slideDurationMs : Int get = 300
val fadeDurationMs : Int get = 200
val slideOffsetDivisor : Int get = 4
transitionSpec = {
val goingUp : Boolean get // 新值比旧值大？if {
// 上升方向：新数字从下方滑入，旧数字向上滑出
slideInVertically(
animationSpec : tween,initialOffsetY : { it / slideOffsetDivisor }
) + fadeIn)
.togerWith(
slideOutVertically(
animationSpec : tween,targetOffsetY : { -it / slideOffsetDivisor }
) + fadeOut)
)
using SizeTransform{ _,_ -> tween}
} else {
// 下跌方向：新数字从上方滑入，旧数字向下滑出
slideInVertically(
animationSpec : tween。initialOffsetY : { -it / slideOffsetDivisor }
) + fadeIn)
.togerWith(
slideOutVertically(
animationSpec : tween,targetOffsetY : { it / slideOffsetDivisor }
) + fadeOut)
)
using SizeTransform{ _,_ -> tween}
}
}

说明的观点是，

• ”goingUp”: 判断是否递增，以决定动画方向。
• ”SizeTransform”: 当文字宽度变化较大时容器尺寸也需要跟随平滑变化，否则旧文字可能被裁剪。
• 若忽略 ”SizeTransform”。容器会立即切换到新尺寸，导致视觉跳脱。加上它几乎没有额外成本，却能避免这类问题。

实现完整代码示例

@Composable
fun SmoothCounterDemo {
var count by remember { mutableIntStateOf }
Column {
Box(
modifier=Modifier
.fillMaxWidth
.height
.clip)
.background),contentAlignment=Alignment.Center
) {
AnimatedContent(
targetState=count。transitionSpec={ /* 上面定义 */ },label ="counter"
){ value ->
Text(
text="$value",fontSize=48.sp,fontWeight=FontWeight.Bold,color=Color
)
}
}
Spacer)
Row) {
Button{ Text }
Button{ Text }
}
}
}

如何微调动画手感？——参数细分解读

• 速度太慢/太快？- 调整 ”slideDurationMs”/ ”fadeDurationMs”;对于表单步进器可设为 ~150‑200ms；关键指标揭晓可设为 ~400‑500ms。
• 移动距离太大/太小？- 修改 ”slideOffsetDivisor”;值越小移动越多，若想让效果更像老虎机滚轮，可设为 ~4；若想轻微位移，则 ~6 或更高。
• 宽度突变显得生硬？- 保证 ‫’SizeTransform’‬;若要弹性或线性过渡，可替换成 keyframes 或自定义 Easing。话说回来，
• 想让位移带一点弹性？- 将滑动部分改为 spring，而保持淡入淡出用 tween；这能给人轻微回弹感，更具物理真实感。

——何时选用 AnimatedContent？

• 仅属性补间： 
• 简单淡入淡出： 
• 需要同时控制进场与退场。并根据状态方向调整动画： 

"无论是计分板、步进器、Tab 指示器还是任何需要一个内容替换另一个内容的 UI"，都有可能受益于这种模式。"——下一次在两个布局做动画过渡的时候，尝试一下 `AnimatedContent` 吧！"