Android 动画体系：属性动画与 Compose 动画对比

收益：读完本文，你将掌握属性动画（ValueAnimator/ObjectAnimator）的底层执行链路，理解 Compose 动画 API 的状态驱动本质，并能在新旧体系之间做出正确选型。
适用版本 ：Android API 11+（属性动画），Compose 1.4+（含 Compose BOM 2023.06+）
预计阅读时长：约 18 分钟

1. 从一个卡顿 Bug 说起

你的 App 有一个「点击按钮 → 卡片展开」的动画，产品说很流畅，但某台低端机上每次展开都掉帧。Profiler 一看，主线程每帧都在执行 requestLayout()，动画回调里改了 View.height。这是属性动画最常见的坑：任何改变布局属性的动画都会触发完整的 Measure/Layout 流程。

要彻底解决这类问题，需要先理解整个动画体系的执行路径。

2. 属性动画执行链路

2.1 核心类关系

复制代码

Choreographer
    │  (VSYNC 信号, 每帧回调)
    ▼
AnimationHandler
    │  (管理所有运行中的 Animator)
    ▼
ValueAnimator.doAnimationFrame()
    │  (计算当前帧的插值比例)
    ▼
TimeInterpolator.getInterpolation(fraction)
    │  (时间→进度 映射)
    ▼
TypeEvaluator.evaluate(fraction, start, end)
    │  (进度→属性值 映射)
    ▼
PropertyValuesHolder.setAnimatedValue(target)
    │  (通过反射或 Property<T,V> 设置目标属性)
    ▼
View.setXxx()  /  ObjectAnimator 目标对象

关键 AOSP 类与方法：

类	路径	关键方法
`ValueAnimator`	`frameworks/base/core/java/android/animation/ValueAnimator.java`	`doAnimationFrame()`, `animateValue()`
`AnimationHandler`	`frameworks/base/core/java/android/animation/AnimationHandler.java`	`addAnimationFrameCallback()`
`Choreographer`	`frameworks/base/core/java/android/view/Choreographer.java`	`postFrameCallback()`, `doFrame()`
`PropertyValuesHolder`	`frameworks/base/core/java/android/animation/PropertyValuesHolder.java`	`setupSetter()`, `setAnimatedValue()`

2.2 ValueAnimator 最小实现

kotlin 复制代码

// 正确写法：只改 translationX（GPU 合成层，不触发 layout）
val animator = ValueAnimator.ofFloat(0f, 200f).apply {
    duration = 300
    interpolator = DecelerateInterpolator()
    addUpdateListener { va ->
        // translationX 由 RenderThread 处理，不走 Measure/Layout
        cardView.translationX = va.animatedValue as Float
    }
}
animator.start()

// ❌ 错误写法：改 width 每帧都触发 requestLayout
ValueAnimator.ofInt(cardView.width, targetWidth).apply {
    addUpdateListener { va ->
        cardView.layoutParams.width = va.animatedValue as Int
        cardView.requestLayout() // 主线程 measure+layout，极易掉帧
    }
}.start()

结论：尽量只操作 translationX/Y、scaleX/Y、rotation、alpha 这 6 个硬件加速属性；需要改尺寸时，优先用 scaleX/Y 模拟，或切换到 TransitionManager。

2.3 ObjectAnimator 的反射代价

ObjectAnimator 内部通过 PropertyValuesHolder.setupSetter() 在第一帧反射查找 setter 并缓存。第一帧有轻微性能损耗，但后续帧复用缓存，代价可忽略。

更高效的写法是使用 Property<T,V>，跳过反射：

kotlin 复制代码

// 用 View.TRANSLATION_X 常量替代字符串反射
ObjectAnimator.ofFloat(view, View.TRANSLATION_X, 0f, 200f).apply {
    duration = 300
    start()
}

3. Compose 动画体系

3.1 状态驱动 vs 命令式

属性动画是命令式 ：你告诉系统"从 A 变到 B，用 300ms"。

Compose 动画是声明式/状态驱动 ：你声明"当状态是 expanded 时，高度是 200dp；当状态是 collapsed 时，高度是 56dp"，Compose 自动在两态之间插值。

复制代码

State Change (MutableState)
    │
    ▼
Recomposition triggered
    │
    ▼
animate*AsState / Transition
    │  (读取 Animator Clock，通过 withFrameNanos 挂起)
    ▼
Snapshot reads inside measure/draw phase
    │
    ▼
LayoutNode re-measure / Canvas draw

3.2 API 全景

复制代码

Compose 动画 API
├── 高层 API（推荐首选）
│   ├── animateFloatAsState      ← 单值插值，最简单
│   ├── animateDpAsState
│   ├── animateColorAsState
│   ├── animateContentSize       ← Modifier，自动插值布局尺寸变化
│   └── AnimatedVisibility       ← 出现/消失动画
│
├── 中层 API
│   ├── updateTransition         ← 多属性同步，基于状态机
│   └── rememberInfiniteTransition ← 循环动画
│
└── 低层 API
    ├── Animatable               ← 命令式控制（snap、animateTo）
    └── animate*AsState (内部使用)

3.3 animateFloatAsState 示例

kotlin 复制代码

@Composable
fun ExpandableCard(isExpanded: Boolean) {
    // 声明：expanded=true → alpha=1f；否则 alpha=0f
    val contentAlpha by animateFloatAsState(
        targetValue = if (isExpanded) 1f else 0f,
        animationSpec = tween(durationMillis = 300, easing = FastOutSlowInEasing),
        label = "contentAlpha"
    )

    Column(modifier = Modifier.animateContentSize()) { // 高度自动插值
        Text("Header")
        if (isExpanded) {
            Text(
                "Content",
                modifier = Modifier.graphicsLayer { alpha = contentAlpha }
            )
        }
    }
}

注意：animateFloatAsState 不会触发完整重组。它内部通过 Snapshot 机制，只在 draw 阶段读取 alpha 值，Compose 运行时会跳过 measure/layout，直接复用上帧的布局结果，仅重绘。这等价于属性动画中的 alpha 操作，都走 GPU 合成层。

3.4 updateTransition：多属性同步

kotlin 复制代码

enum class CardState { Collapsed, Expanded }

@Composable
fun AnimatedCard(state: CardState) {
    val transition = updateTransition(targetState = state, label = "card")

    val elevation by transition.animateDp(label = "elevation") { s ->
        if (s == CardState.Expanded) 8.dp else 2.dp
    }
    val cornerRadius by transition.animateDp(label = "corner") { s ->
        if (s == CardState.Expanded) 16.dp else 4.dp
    }
    val bgColor by transition.animateColor(label = "bg") { s ->
        if (s == CardState.Expanded) Color(0xFFF0F4FF) else Color.White
    }

    Card(
        elevation = CardDefaults.cardElevation(defaultElevation = elevation),
        shape = RoundedCornerShape(cornerRadius),
        colors = CardDefaults.cardColors(containerColor = bgColor)
    ) { /* content */ }
}

updateTransition 保证所有属性在同一帧启动、同一帧结束，避免多属性动画时序错位。

3.5 Animatable：命令式精确控制

当你需要像属性动画那样精确控制（如跟随手势、中途取消、spring 物理动画），使用 Animatable：

kotlin 复制代码

@Composable
fun DraggableItem() {
    val offsetX = remember { Animatable(0f) }
    val scope = rememberCoroutineScope()

    Box(
        modifier = Modifier
            .offset { IntOffset(offsetX.value.roundToInt(), 0) }
            .pointerInput(Unit) {
                detectHorizontalDragGestures(
                    onDragEnd = {
                        scope.launch {
                            // spring 回弹，无需手动设置 duration
                            offsetX.animateTo(
                                targetValue = 0f,
                                animationSpec = spring(
                                    dampingRatio = Spring.DampingRatioMediumBouncy,
                                    stiffness = Spring.StiffnessLow
                                )
                            )
                        }
                    },
                    onHorizontalDrag = { _, dragAmount ->
                        scope.launch {
                            offsetX.snapTo(offsetX.value + dragAmount) // 跟手，不插值
                        }
                    }
                )
            }
    )
}

4. 体系对比

4.1 核心差异表

维度	属性动画（View）	Compose 动画
驱动方式	命令式，手动 start/cancel	声明式，状态驱动自动执行
线程	主线程更新属性，RenderThread 合成	主线程重组，RenderThread 合成
布局触发	改 layout 属性会触发 requestLayout	`animateContentSize` 内部优化，减少完整 layout
生命周期	需手动在 onPause/onDestroy 取消	`LaunchedEffect`/`Scope` 自动跟随 Composable 生命周期
物理动画	需引入 `SpringAnimation`（DynamicAnimation）	`spring()` 内置，开箱即用
可测试性	难以单元测试	`ComposeTestRule` 可控制动画时钟，精确断言帧状态
互操作	原生支持所有 View 属性	需要 `rememberUpdatedState` 桥接 View 属性

4.2 选型决策树

复制代码

需要做动画
    │
    ├─ 项目使用 Compose UI ──────────────────────────────────────────┐
    │                                                               │
    └─ 项目使用传统 View                                             │
         │                                                          │
         ├─ 只改硬件加速属性（alpha/translation/scale/rotation）     │
         │     → ObjectAnimator / ViewPropertyAnimator              │
         │                                                          │
         ├─ 改布局尺寸（width/height/margin）                        │
         │     → TransitionManager + ConstraintLayout / Scene       │
         │                                                          │
         └─ 跨 Fragment/Activity 共享元素                            │
               → Shared Element Transition                          │
                                                                    ↓
                                                         单个状态切换？
                                                           ├─ 是 → animate*AsState / AnimatedVisibility
                                                           └─ 否 → updateTransition / Animatable

5. 最佳实践

5.1 属性动画：优先使用 ViewPropertyAnimator

做法：对 View 的 6 个硬件加速属性动画，优先用 view.animate() 而非 ObjectAnimator。
原因：ViewPropertyAnimator 在内部合并同一帧内对多个属性的修改为一次 invalidate，且 API 更简洁。
对比：用 ObjectAnimator.ofFloat(view, "alpha", ...) + ObjectAnimator.ofFloat(view, "translationX", ...) 各自独立触发 invalidate；ViewPropertyAnimator 合并为一次。

kotlin 复制代码

// 推荐
view.animate()
    .alpha(0f)
    .translationX(100f)
    .setDuration(300)
    .setInterpolator(FastOutSlowInEasing.toInterpolator())
    .start()

// 不推荐（两次独立 invalidate）
ObjectAnimator.ofFloat(view, "alpha", 0f).start()
ObjectAnimator.ofFloat(view, "translationX", 100f).start()

5.2 Compose：用 `label` 参数辅助 Layout Inspector

做法：所有 animate*AsState 和 updateTransition 都加 label 参数。
原因：Android Studio Layout Inspector 的动画预览功能依赖 label 做动画标识，没有 label 时 Inspector 显示 <unlabeled>，难以调试多动画场景。
对比：不加 label 时，Inspector 无法区分同一 Composable 中的多个动画实例。

5.3 Compose：避免在动画规格中创建对象

做法：将 animationSpec 提升到 Composable 外部或用 remember。
原因：每次重组都重建 tween()/spring() 对象会造成不必要的 GC 压力，虽然不影响正确性，但在高频重组场景（如列表滚动触发的大量 Composable）会累积。

kotlin 复制代码

// ❌ 每次重组都 new 一个 TweenSpec
val alpha by animateFloatAsState(
    targetValue = if (visible) 1f else 0f,
    animationSpec = tween(300) // 每次重组重建
)

// ✅ 提升到顶层常量
private val FadeSpec = tween<Float>(durationMillis = 300)

@Composable
fun MyComp(visible: Boolean) {
    val alpha by animateFloatAsState(
        targetValue = if (visible) 1f else 0f,
        animationSpec = FadeSpec
    )
}

5.4 属性动画：务必在生命周期结束时取消

做法：在 onStop 或 onDestroyView 中调用 animator.cancel()。
原因：ValueAnimator 持有 target 对象的强引用（通过 WeakReference 持有 listener，但 target 是强引用）。若 Activity/Fragment 销毁后动画仍在跑，会阻止 GC 回收视图树。
对比：不取消 → 内存泄漏 + 动画回调对已销毁 View 写入属性，可能触发 NPE。

6. 常见坑点

坑 1：Compose `animateFloatAsState` 初始帧跳变

现象：页面打开时，某个元素不是从初始值开始动画，而是直接跳到目标值。
原因：animateFloatAsState 的初始值取决于首次重组时传入的 targetValue。若首次就传入目标值（如 1f），动画认为"当前值已是目标值"，不会播放。
复现：

kotlin 复制代码

// 错误：首次重组 visible=true，直接 alpha=1f，没有淡入
var visible by remember { mutableStateOf(true) }
val alpha by animateFloatAsState(if (visible) 1f else 0f)

解决：用 AnimatedVisibility 或在首次重组时用 false 初始化，然后 LaunchedEffect 中切换：

kotlin 复制代码

var visible by remember { mutableStateOf(false) }
LaunchedEffect(Unit) { visible = true } // 触发 0f→1f 动画
val alpha by animateFloatAsState(if (visible) 1f else 0f, label = "alpha")

坑 2：属性动画在后台继续消耗 CPU

现象：App 按 Home 键后台，CPU 占用未降低，耗电增加。
原因：ValueAnimator 默认不感知 Activity 生命周期，后台仍通过 Choreographer 注册 VSYNC 回调。
解决：onStop 中 animator.pause()（API 19+），onStart 中 animator.resume()；或使用 LifecycleObserver 自动管理。

kotlin 复制代码

lifecycleScope.launch {
    lifecycle.repeatOnLifecycle(Lifecycle.State.STARTED) {
        animator.resume()
        try { awaitCancellation() } finally { animator.pause() }
    }
}

坑 3：`updateTransition` 状态机中间态丢失

现象：快速连续切换状态（A→B→A），动画中间态被跳过，直接跳到最终态。
原因：updateTransition 每次状态改变都取消上一个动画，从当前插值位置开始向新目标插值（行为正确），但若切换太快，中间态确实不会展示。
解决：这是预期行为。若需要队列化状态，改用 Animatable + Channel 手动管理队列。

坑 4：`ObjectAnimator` 反射找不到 setter 崩溃

现象：android.animation.PropertyValuesHolder: Method setFoo() not found on target class
原因：目标属性名拼写错误，或被 ProGuard/R8 混淆导致方法名变更。
解决：用 Property<T,V> 常量替代字符串，或在混淆规则中 keep 相关 setter：

proguard 复制代码

-keepclassmembers class com.example.MyView {
    void setFoo(float);
}

7. 总结

属性动画 的核心是 Choreographer → AnimationHandler → ValueAnimator → TypeEvaluator 链路，每帧通过反射或 Property 写入属性值。
只操作 6 个硬件加速属性（translation/scale/rotation/alpha）才能真正避免触发 layout，这是解决卡顿的根本。
Compose 动画是状态驱动的：状态变 → 重组 → 读取插值后的属性值 → draw 阶段应用，最小化 recompose 范围。
updateTransition 保证多属性同步 ，Animatable 提供命令式精确控制，是 Compose 中对应属性动画的 API 对等物。
生命周期管理是属性动画的最大坑：必须在合适时机 cancel/pause，Compose 动画通过 coroutine scope 自动规避了这一问题。

核心结论 ：新项目首选 Compose 动画（状态驱动、生命周期安全）；View 体系中改 layout 属性一定用 TransitionManager，改渲染属性用 ViewPropertyAnimator，绝不在动画回调里直接改 layoutParams。

Android 动画体系：属性动画与 Compose 动画对比