Android 动画详解从原理到实战Android 动画体系经历了从传统 View 动画 → 属性动画 → 过渡动画 → MotionLayout → Jetpack Compose 的演进。以下从分类、原理、API、实战四个维度系统梳理。一、动画分类总览Android 动画按实现方式可分为四大类类别包名适用场景特点View 动画补间动画android.view.animation简单 UI 动效只改变绘制位置不改变实际属性帧动画Drawable 动画android.graphics.drawable加载动画、序列帧逐帧切换图片内存占用高属性动画android.animation任意对象属性动画真正改变对象属性功能最强大过渡动画android.transitionActivity/Fragment 切换场景切换间的连贯体验MotionLayoutandroidx.constraintlayout.motion复杂交互动效基于 ConstraintLayout 的声明式动画Compose 动画androidx.compose.animation现代 UI 开发声明式、状态驱动、代码简洁二、View 动画补间动画⚠️已不推荐View 动画只能作用于 View且只改变绘制位置不改变实际属性如按钮移动后点击区域仍在原处。新项目请优先使用属性动画。2.1 四种基本变换动画类型类名属性平移TranslateAnimationfromXDelta,toXDelta,fromYDelta,toYDelta缩放ScaleAnimationfromXScale,toXScale,fromYScale,toYScale旋转RotateAnimationfromDegrees,toDegrees,pivotX,pivotY透明度AlphaAnimationfromAlpha,toAlpha2.2 XML 定义xml!-- res/anim/scale_rotate.xml -- set xmlns:androidhttp://schemas.android.com/apk/res/android android:duration1000 android:fillAftertrue android:interpolatorandroid:anim/accelerate_decelerate_interpolator scale android:fromXScale1.0 android:toXScale2.0 android:fromYScale1.0 android:toYScale2.0 android:pivotX50% android:pivotY50% / rotate android:fromDegrees0 android:toDegrees360 android:pivotX50% android:pivotY50% / /set2.3 代码调用kotlinval animation AnimationUtils.loadAnimation(context, R.anim.scale_rotate) view.startAnimation(animation)三、帧动画Drawable 动画将一系列 Drawable 按时间间隔逐帧显示适合简单的加载动画。xml!-- res/drawable/loading_animation.xml -- animation-list xmlns:androidhttp://schemas.android.com/apk/res/android android:oneshotfalse item android:drawabledrawable/frame1 android:duration100 / item android:drawabledrawable/frame2 android:duration100 / item android:drawabledrawable/frame3 android:duration100 / /animation-listkotlinval imageView: ImageView findViewById(R.id.imageView) imageView.setImageResource(R.drawable.loading_animation) val animationDrawable imageView.drawable as AnimationDrawable animationDrawable.start()⚠️注意帧动画会预加载所有帧到内存图片过多或过大时容易造成 OOM。建议用 Lottie 替代复杂帧动画。四、属性动画Property Animation属性动画是 Android 3.0API 11引入的动画框架真正修改对象的属性值功能强大且灵活。4.1 核心类表格类作用ValueAnimator动画引擎计算动画值不直接操作对象ObjectAnimatorValueAnimator子类直接操作目标对象的属性AnimatorSet组合多个动画控制执行顺序Interpolator插值器定义动画变化速率TypeEvaluator估值器定义属性值的计算方式4.2 ValueAnimatorkotlinval animator ValueAnimator.ofFloat(0f, 100f).apply { duration 1000 interpolator AccelerateDecelerateInterpolator() addUpdateListener { animation - val value animation.animatedValue as Float // 手动将计算值应用到目标对象 view.translationX value } } animator.start()4.3 ObjectAnimator最常用kotlin// 平移 ObjectAnimator.ofFloat(view, translationX, 0f, 200f).apply { duration 1000 start() } // 旋转 ObjectAnimator.ofFloat(view, rotation, 0f, 360f).apply { duration 1000 start() } // 透明度 ObjectAnimator.ofFloat(view, alpha, 1f, 0f, 1f).apply { duration 1500 start() } // 背景色变化需要 ArgbEvaluator ObjectAnimator.ofInt(view, backgroundColor, Color.RED, Color.BLUE).apply { duration 2000 setEvaluator(ArgbEvaluator()) start() }4.4 可动画的 View 属性属性说明translationX/translationY相对于 left/top 的偏移x/y最终位置left translationXrotation/rotationX/rotationY2D/3D 旋转scaleX/scaleY缩放pivotX/pivotY旋转/缩放的中心点alpha透明度width/height宽高需配合 wrapper4.5 AnimatorSet 组合动画kotlinval fadeOut ObjectAnimator.ofFloat(view, alpha, 1f, 0f) val mover ObjectAnimator.ofFloat(view, translationX, -500f, 0f) val fadeIn ObjectAnimator.ofFloat(view, alpha, 0f, 1f) AnimatorSet().apply { play(mover).with(fadeIn).after(fadeOut) // fadeOut 先执行然后 mover 和 fadeIn 同时执行 duration 2000 start() }4.6 ViewPropertyAnimator链式调用kotlinview.animate() .translationX(200f) .translationY(100f) .rotation(360f) .alpha(0.5f) .setDuration(1000) .setInterpolator(BounceInterpolator()) .withLayer() // 开启硬件层加速 .withStartAction { /* 动画开始前 */ } .withEndAction { /* 动画结束后 */ } .start()ViewPropertyAnimator内部优化了多个属性同时动画的性能比多个ObjectAnimator更高效。4.7 插值器Interpolator插值器效果LinearInterpolator匀速AccelerateInterpolator加速DecelerateInterpolator减速AccelerateDecelerateInterpolator先加速后减速BounceInterpolator弹跳效果OvershootInterpolator冲过头再回弹AnticipateInterpolator先回退再前进AnticipateOvershootInterpolator先回退冲过头再回弹4.8 XML 声明属性动画xml!-- res/animator/property_animator.xml -- set android:orderingsequentially objectAnimator android:propertyNamex android:duration500 android:valueTo400 android:valueTypeintType / objectAnimator android:propertyNamealpha android:duration500 android:valueTo1f / /setkotlinval set AnimatorInflater.loadAnimator(context, R.animator.property_animator) as AnimatorSet set.setTarget(view) set.start()五、过渡动画Transition5.1 Activity 过渡动画kotlin// 传统方式API 21 以下兼容 val intent Intent(this, TargetActivity::class.java) startActivity(intent) overridePendingTransition(R.anim.slide_in_right, R.anim.slide_out_left)5.2 共享元素过渡Shared Elementkotlin// Activity A val options ActivityOptions.makeSceneTransitionAnimation( this, sharedImageView, shared_image // transitionName 必须匹配 ) startActivity(intent, options.toBundle()) // Activity B 的 layout 中 ImageView android:idid/sharedImageView android:transitionNameshared_image ... /5.3 Fragment 过渡kotlinval fragmentB FragmentB() fragmentB.sharedElementEnterTransition TransitionInflater.from(context) .inflateTransition(android.R.transition.move) supportFragmentManager.beginTransaction() .replace(R.id.container, fragmentB) .addSharedElement(sharedView, shared_name) .commit()六、MotionLayoutMotionLayout 是 ConstraintLayout 的子类通过声明式 XML 定义复杂动画是传统 View 系统中处理复杂交互动画的最佳选择。6.1 核心概念概念说明MotionScene动画场景描述文件ConstraintSet定义布局的起始/结束状态Transition定义两个状态之间的过渡KeyFrameSet关键帧控制中间状态OnClick/OnSwipe触发方式6.2 基本示例xml!-- res/layout/activity_main.xml -- androidx.constraintlayout.motion.widget.MotionLayout xmlns:androidhttp://schemas.android.com/apk/res/android xmlns:apphttp://schemas.android.com/apk/res-auto android:layout_widthmatch_parent android:layout_heightmatch_parent app:layoutDescriptionxml/scene View android:idid/box android:layout_width64dp android:layout_height64dp android:backgroundcolor/purple / /androidx.constraintlayout.motion.widget.MotionLayoutxml!-- res/xml/scene.xml -- MotionScene xmlns:apphttp://schemas.android.com/apk/res-auto !-- 起始状态 -- ConstraintSet android:idid/start Constraint android:idid/box android:layout_width64dp android:layout_height64dp app:layout_constraintStart_toStartOfparent app:layout_constraintTop_toTopOfparent / /ConstraintSet !-- 结束状态 -- ConstraintSet android:idid/end Constraint android:idid/box android:layout_width64dp android:layout_height64dp app:layout_constraintEnd_toEndOfparent app:layout_constraintBottom_toBottomOfparent / /ConstraintSet !-- 过渡定义 -- Transition app:constraintSetStartid/start app:constraintSetEndid/end app:duration1000 OnClick app:targetIdid/box app:clickActiontoggle / /Transition /MotionScene6.3 关键帧KeyFramexmlTransition ... KeyFrameSet !-- 中间位置关键帧动画 50% 时位于屏幕中心 -- KeyPosition app:framePosition50 app:motionTargetid/box app:keyPositionTypeparentRelative app:percentX0.5 app:percentY0.5 / !-- 中间属性关键帧50% 时旋转 180 度 -- KeyAttribute app:framePosition50 app:motionTargetid/box android:rotation180 / /KeyFrameSet /Transition6.4 代码控制kotlinmotionLayout.transitionToState(R.id.end) // 过渡到结束状态 motionLayout.transitionToStart() // 回到起始状态 motionLayout.progress 0.5f // 设置进度0~1 motionLayout.setTransition(R.id.start, R.id.end) // 设置过渡七、Jetpack Compose 动画推荐2026 年Jetpack Compose 已成为 Android UI 开发的默认方式其动画 API 声明式、简洁且功能强大。7.1 状态驱动动画kotlinComposable fun AnimatedBox() { var expanded by remember { mutableStateOf(false) } // 尺寸动画 val size by animateDpAsState( targetValue if (expanded) 120.dp else 60.dp, animationSpec tween(durationMillis 500, easing FastOutSlowInEasing), label size ) // 颜色动画 val color by animateColorAsState( targetValue if (expanded) Color.Green else Color.Blue, label color ) Box( modifier Modifier .size(size) .background(color, CircleShape) .clickable { expanded !expanded } ) }7.2 可见性动画kotlinvar visible by remember { mutableStateOf(true) } AnimatedVisibility( visible visible, enter fadeIn() slideInHorizontally(), exit fadeOut() slideOutHorizontally() ) { Text(Hello Compose!) }7.3 内容切换动画kotlinvar selected by remember { mutableStateOf(false) } Crossfade(targetState selected, label crossfade) { state - when (state) { true - Icon(Icons.Default.Check, null) false - Icon(Icons.Default.Close, null) } }7.4 内容变更动画kotlinvar count by remember { mutableIntStateOf(0) } AnimatedContent( targetState count, transitionSpec { if (targetState initialState) { slideInVertically { it } fadeIn() togetherWith slideOutVertically { -it } fadeOut() } else { slideInVertically { -it } fadeIn() togetherWith slideOutVertically { it } fadeOut() } }, label count ) { targetCount - Text(text $targetCount, fontSize 48.sp) }7.5 无限循环动画kotlinval infiniteTransition rememberInfiniteTransition(label pulse) val scale by infiniteTransition.animateFloat( initialValue 1f, targetValue 1.5f, animationSpec infiniteRepeatable( animation tween(1000), repeatMode RepeatMode.Reverse ), label scale ) Box( modifier Modifier .size(100.dp) .scale(scale) .background(Color.Red, CircleShape) )7.6 手势驱动动画kotlinval offset remember { Animatable(Offset.Zero, Offset.VectorConverter) } Box( modifier Modifier .offset { offset.value.toIntOffset() } .size(100.dp) .background(Color.Blue) .pointerInput(Unit) { detectDragGestures( onDrag { change, dragAmount - change.consume() scope.launch { offset.snapTo(offset.value dragAmount) } }, onDragEnd { scope.launch { // 弹簧回弹到原点 offset.animateTo( targetValue Offset.Zero, animationSpec spring( dampingRatio Spring.DampingRatioMediumBouncy, stiffness Spring.StiffnessLow ) ) } } ) } )7.7 共享元素过渡ComposekotlinSharedTransitionLayout { AnimatedContent( targetState selectedItem, transitionSpec { (fadeIn() togetherWith fadeOut()).using(SizeTransform(clip false)) } ) { item - if (item null) { // 列表页 LazyColumn { items(items) { photo - Image( painter rememberAsyncImagePainter(photo.url), contentDescription null, modifier Modifier .sharedElement( state rememberSharedContentState(key photo.id), animatedVisibilityScope thisAnimatedContent ) .clickable { selectedItem photo } ) } } } else { // 详情页 Image( painter rememberAsyncImagePainter(item.url), contentDescription null, modifier Modifier .sharedElement( state rememberSharedContentState(key item.id), animatedVisibilityScope thisAnimatedContent ) .fillMaxSize() ) } } }八、动画核心机制8.1 Vsync Choreographer 机制Android 动画的流畅性依赖于Vsync垂直同步和Choreographer的协同工作Vsync 信号显示器硬件每帧刷新完成后发出同步信号60Hz 16.6ms/帧120Hz 8.3ms/帧Choreographer通过postCallback()注册动画回调在 Vsync 信号到达时触发doFrame()动画更新ValueAnimator计算当前帧的属性值 → 调用Interpolator计算插值 → 调用TypeEvaluator计算最终值 → 更新 View 属性 →invalidate()触发重绘SurfaceFlinger合成所有图层输出到屏幕8.2 属性动画计算流程plainstart() → Choreographer 注册回调 → 等待 Vsync 信号 → doFrame(frameTimeNanos) → 计算 elapsedFraction (0~1) → Interpolator 计算 interpolatedFraction → TypeEvaluator 计算属性值 → 更新目标对象属性 → invalidate() 请求重绘 → 下一帧循环直到动画结束九、性能优化最佳实践9.1 避免掉帧表格优化手段说明使用硬件层view.animate().withLayer()或view.setLayerType(View.LAYER_TYPE_HARDWARE, null)避免主线程阻塞动画回调中不做 IO/复杂计算减少过度绘制使用 GPU 调试模式分析控制同时动画数MotionLayout 同时动画 50 个 View 可能掉帧使用 Profile GPU Rendering开发者选项中开启查看各阶段耗时9.2 各场景选型建议场景推荐方案简单属性变化位移、透明度ObjectAnimator/ViewPropertyAnimator复杂交互动效折叠头、拖拽MotionLayout新项目的所有动画Jetpack Compose Animation API列表项增删动画RecyclerView.ItemAnimator/ ComposeLazyColumnAnimatedVisibility跨页面共享元素SharedElementTransition/ ComposeSharedTransitionLayout复杂帧动画Lottie替代 AnimationDrawable9.3 Compose 动画性能Compose 动画基于重组Recomposition和智能跳过只有状态变化的 Composable 会重新执行使用remember缓存动画状态避免不必要的计算复杂动画使用LaunchedEffectAnimatable精确控制十、总结对比维度View 动画属性动画MotionLayoutCompose 动画实际改变属性❌ 否✅ 是✅ 是✅ 是非 View 对象❌ 不支持✅ 支持❌ 仅 View✅ 任意状态代码量中中少XML 声明少复杂交互❌ 困难⚠️ 较复杂✅ 擅长✅ 擅长维护性一般一般好优秀推荐度⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐2026 年建议新项目直接使用Jetpack Compose Compose Animation API维护中的传统项目复杂动画迁移到MotionLayout简单动画使用属性动画替代 View 动画。
Android 动画详解从原理到实战Android 动画体系经历了从传统 View 动画 → 属性动画 → 过渡动画 → MotionLayout → Jetpack Compose 的演进。以下从分类、原理、API、实战四个维度系统梳理。一、动画分类总览Android 动画按实现方式可分为四大类类别包名适用场景特点View 动画补间动画android.view.animation简单 UI 动效只改变绘制位置不改变实际属性帧动画Drawable 动画android.graphics.drawable加载动画、序列帧逐帧切换图片内存占用高属性动画android.animation任意对象属性动画真正改变对象属性功能最强大过渡动画android.transitionActivity/Fragment 切换场景切换间的连贯体验MotionLayoutandroidx.constraintlayout.motion复杂交互动效基于 ConstraintLayout 的声明式动画Compose 动画androidx.compose.animation现代 UI 开发声明式、状态驱动、代码简洁二、View 动画补间动画⚠️已不推荐View 动画只能作用于 View且只改变绘制位置不改变实际属性如按钮移动后点击区域仍在原处。新项目请优先使用属性动画。2.1 四种基本变换动画类型类名属性平移TranslateAnimationfromXDelta,toXDelta,fromYDelta,toYDelta缩放ScaleAnimationfromXScale,toXScale,fromYScale,toYScale旋转RotateAnimationfromDegrees,toDegrees,pivotX,pivotY透明度AlphaAnimationfromAlpha,toAlpha2.2 XML 定义xml!-- res/anim/scale_rotate.xml -- set xmlns:androidhttp://schemas.android.com/apk/res/android android:duration1000 android:fillAftertrue android:interpolatorandroid:anim/accelerate_decelerate_interpolator scale android:fromXScale1.0 android:toXScale2.0 android:fromYScale1.0 android:toYScale2.0 android:pivotX50% android:pivotY50% / rotate android:fromDegrees0 android:toDegrees360 android:pivotX50% android:pivotY50% / /set2.3 代码调用kotlinval animation AnimationUtils.loadAnimation(context, R.anim.scale_rotate) view.startAnimation(animation)三、帧动画Drawable 动画将一系列 Drawable 按时间间隔逐帧显示适合简单的加载动画。xml!-- res/drawable/loading_animation.xml -- animation-list xmlns:androidhttp://schemas.android.com/apk/res/android android:oneshotfalse item android:drawabledrawable/frame1 android:duration100 / item android:drawabledrawable/frame2 android:duration100 / item android:drawabledrawable/frame3 android:duration100 / /animation-listkotlinval imageView: ImageView findViewById(R.id.imageView) imageView.setImageResource(R.drawable.loading_animation) val animationDrawable imageView.drawable as AnimationDrawable animationDrawable.start()⚠️注意帧动画会预加载所有帧到内存图片过多或过大时容易造成 OOM。建议用 Lottie 替代复杂帧动画。四、属性动画Property Animation属性动画是 Android 3.0API 11引入的动画框架真正修改对象的属性值功能强大且灵活。4.1 核心类表格类作用ValueAnimator动画引擎计算动画值不直接操作对象ObjectAnimatorValueAnimator子类直接操作目标对象的属性AnimatorSet组合多个动画控制执行顺序Interpolator插值器定义动画变化速率TypeEvaluator估值器定义属性值的计算方式4.2 ValueAnimatorkotlinval animator ValueAnimator.ofFloat(0f, 100f).apply { duration 1000 interpolator AccelerateDecelerateInterpolator() addUpdateListener { animation - val value animation.animatedValue as Float // 手动将计算值应用到目标对象 view.translationX value } } animator.start()4.3 ObjectAnimator最常用kotlin// 平移 ObjectAnimator.ofFloat(view, translationX, 0f, 200f).apply { duration 1000 start() } // 旋转 ObjectAnimator.ofFloat(view, rotation, 0f, 360f).apply { duration 1000 start() } // 透明度 ObjectAnimator.ofFloat(view, alpha, 1f, 0f, 1f).apply { duration 1500 start() } // 背景色变化需要 ArgbEvaluator ObjectAnimator.ofInt(view, backgroundColor, Color.RED, Color.BLUE).apply { duration 2000 setEvaluator(ArgbEvaluator()) start() }4.4 可动画的 View 属性属性说明translationX/translationY相对于 left/top 的偏移x/y最终位置left translationXrotation/rotationX/rotationY2D/3D 旋转scaleX/scaleY缩放pivotX/pivotY旋转/缩放的中心点alpha透明度width/height宽高需配合 wrapper4.5 AnimatorSet 组合动画kotlinval fadeOut ObjectAnimator.ofFloat(view, alpha, 1f, 0f) val mover ObjectAnimator.ofFloat(view, translationX, -500f, 0f) val fadeIn ObjectAnimator.ofFloat(view, alpha, 0f, 1f) AnimatorSet().apply { play(mover).with(fadeIn).after(fadeOut) // fadeOut 先执行然后 mover 和 fadeIn 同时执行 duration 2000 start() }4.6 ViewPropertyAnimator链式调用kotlinview.animate() .translationX(200f) .translationY(100f) .rotation(360f) .alpha(0.5f) .setDuration(1000) .setInterpolator(BounceInterpolator()) .withLayer() // 开启硬件层加速 .withStartAction { /* 动画开始前 */ } .withEndAction { /* 动画结束后 */ } .start()ViewPropertyAnimator内部优化了多个属性同时动画的性能比多个ObjectAnimator更高效。4.7 插值器Interpolator插值器效果LinearInterpolator匀速AccelerateInterpolator加速DecelerateInterpolator减速AccelerateDecelerateInterpolator先加速后减速BounceInterpolator弹跳效果OvershootInterpolator冲过头再回弹AnticipateInterpolator先回退再前进AnticipateOvershootInterpolator先回退冲过头再回弹4.8 XML 声明属性动画xml!-- res/animator/property_animator.xml -- set android:orderingsequentially objectAnimator android:propertyNamex android:duration500 android:valueTo400 android:valueTypeintType / objectAnimator android:propertyNamealpha android:duration500 android:valueTo1f / /setkotlinval set AnimatorInflater.loadAnimator(context, R.animator.property_animator) as AnimatorSet set.setTarget(view) set.start()五、过渡动画Transition5.1 Activity 过渡动画kotlin// 传统方式API 21 以下兼容 val intent Intent(this, TargetActivity::class.java) startActivity(intent) overridePendingTransition(R.anim.slide_in_right, R.anim.slide_out_left)5.2 共享元素过渡Shared Elementkotlin// Activity A val options ActivityOptions.makeSceneTransitionAnimation( this, sharedImageView, shared_image // transitionName 必须匹配 ) startActivity(intent, options.toBundle()) // Activity B 的 layout 中 ImageView android:idid/sharedImageView android:transitionNameshared_image ... /5.3 Fragment 过渡kotlinval fragmentB FragmentB() fragmentB.sharedElementEnterTransition TransitionInflater.from(context) .inflateTransition(android.R.transition.move) supportFragmentManager.beginTransaction() .replace(R.id.container, fragmentB) .addSharedElement(sharedView, shared_name) .commit()六、MotionLayoutMotionLayout 是 ConstraintLayout 的子类通过声明式 XML 定义复杂动画是传统 View 系统中处理复杂交互动画的最佳选择。6.1 核心概念概念说明MotionScene动画场景描述文件ConstraintSet定义布局的起始/结束状态Transition定义两个状态之间的过渡KeyFrameSet关键帧控制中间状态OnClick/OnSwipe触发方式6.2 基本示例xml!-- res/layout/activity_main.xml -- androidx.constraintlayout.motion.widget.MotionLayout xmlns:androidhttp://schemas.android.com/apk/res/android xmlns:apphttp://schemas.android.com/apk/res-auto android:layout_widthmatch_parent android:layout_heightmatch_parent app:layoutDescriptionxml/scene View android:idid/box android:layout_width64dp android:layout_height64dp android:backgroundcolor/purple / /androidx.constraintlayout.motion.widget.MotionLayoutxml!-- res/xml/scene.xml -- MotionScene xmlns:apphttp://schemas.android.com/apk/res-auto !-- 起始状态 -- ConstraintSet android:idid/start Constraint android:idid/box android:layout_width64dp android:layout_height64dp app:layout_constraintStart_toStartOfparent app:layout_constraintTop_toTopOfparent / /ConstraintSet !-- 结束状态 -- ConstraintSet android:idid/end Constraint android:idid/box android:layout_width64dp android:layout_height64dp app:layout_constraintEnd_toEndOfparent app:layout_constraintBottom_toBottomOfparent / /ConstraintSet !-- 过渡定义 -- Transition app:constraintSetStartid/start app:constraintSetEndid/end app:duration1000 OnClick app:targetIdid/box app:clickActiontoggle / /Transition /MotionScene6.3 关键帧KeyFramexmlTransition ... KeyFrameSet !-- 中间位置关键帧动画 50% 时位于屏幕中心 -- KeyPosition app:framePosition50 app:motionTargetid/box app:keyPositionTypeparentRelative app:percentX0.5 app:percentY0.5 / !-- 中间属性关键帧50% 时旋转 180 度 -- KeyAttribute app:framePosition50 app:motionTargetid/box android:rotation180 / /KeyFrameSet /Transition6.4 代码控制kotlinmotionLayout.transitionToState(R.id.end) // 过渡到结束状态 motionLayout.transitionToStart() // 回到起始状态 motionLayout.progress 0.5f // 设置进度0~1 motionLayout.setTransition(R.id.start, R.id.end) // 设置过渡七、Jetpack Compose 动画推荐2026 年Jetpack Compose 已成为 Android UI 开发的默认方式其动画 API 声明式、简洁且功能强大。7.1 状态驱动动画kotlinComposable fun AnimatedBox() { var expanded by remember { mutableStateOf(false) } // 尺寸动画 val size by animateDpAsState( targetValue if (expanded) 120.dp else 60.dp, animationSpec tween(durationMillis 500, easing FastOutSlowInEasing), label size ) // 颜色动画 val color by animateColorAsState( targetValue if (expanded) Color.Green else Color.Blue, label color ) Box( modifier Modifier .size(size) .background(color, CircleShape) .clickable { expanded !expanded } ) }7.2 可见性动画kotlinvar visible by remember { mutableStateOf(true) } AnimatedVisibility( visible visible, enter fadeIn() slideInHorizontally(), exit fadeOut() slideOutHorizontally() ) { Text(Hello Compose!) }7.3 内容切换动画kotlinvar selected by remember { mutableStateOf(false) } Crossfade(targetState selected, label crossfade) { state - when (state) { true - Icon(Icons.Default.Check, null) false - Icon(Icons.Default.Close, null) } }7.4 内容变更动画kotlinvar count by remember { mutableIntStateOf(0) } AnimatedContent( targetState count, transitionSpec { if (targetState initialState) { slideInVertically { it } fadeIn() togetherWith slideOutVertically { -it } fadeOut() } else { slideInVertically { -it } fadeIn() togetherWith slideOutVertically { it } fadeOut() } }, label count ) { targetCount - Text(text $targetCount, fontSize 48.sp) }7.5 无限循环动画kotlinval infiniteTransition rememberInfiniteTransition(label pulse) val scale by infiniteTransition.animateFloat( initialValue 1f, targetValue 1.5f, animationSpec infiniteRepeatable( animation tween(1000), repeatMode RepeatMode.Reverse ), label scale ) Box( modifier Modifier .size(100.dp) .scale(scale) .background(Color.Red, CircleShape) )7.6 手势驱动动画kotlinval offset remember { Animatable(Offset.Zero, Offset.VectorConverter) } Box( modifier Modifier .offset { offset.value.toIntOffset() } .size(100.dp) .background(Color.Blue) .pointerInput(Unit) { detectDragGestures( onDrag { change, dragAmount - change.consume() scope.launch { offset.snapTo(offset.value dragAmount) } }, onDragEnd { scope.launch { // 弹簧回弹到原点 offset.animateTo( targetValue Offset.Zero, animationSpec spring( dampingRatio Spring.DampingRatioMediumBouncy, stiffness Spring.StiffnessLow ) ) } } ) } )7.7 共享元素过渡ComposekotlinSharedTransitionLayout { AnimatedContent( targetState selectedItem, transitionSpec { (fadeIn() togetherWith fadeOut()).using(SizeTransform(clip false)) } ) { item - if (item null) { // 列表页 LazyColumn { items(items) { photo - Image( painter rememberAsyncImagePainter(photo.url), contentDescription null, modifier Modifier .sharedElement( state rememberSharedContentState(key photo.id), animatedVisibilityScope thisAnimatedContent ) .clickable { selectedItem photo } ) } } } else { // 详情页 Image( painter rememberAsyncImagePainter(item.url), contentDescription null, modifier Modifier .sharedElement( state rememberSharedContentState(key item.id), animatedVisibilityScope thisAnimatedContent ) .fillMaxSize() ) } } }八、动画核心机制8.1 Vsync Choreographer 机制Android 动画的流畅性依赖于Vsync垂直同步和Choreographer的协同工作Vsync 信号显示器硬件每帧刷新完成后发出同步信号60Hz 16.6ms/帧120Hz 8.3ms/帧Choreographer通过postCallback()注册动画回调在 Vsync 信号到达时触发doFrame()动画更新ValueAnimator计算当前帧的属性值 → 调用Interpolator计算插值 → 调用TypeEvaluator计算最终值 → 更新 View 属性 →invalidate()触发重绘SurfaceFlinger合成所有图层输出到屏幕8.2 属性动画计算流程plainstart() → Choreographer 注册回调 → 等待 Vsync 信号 → doFrame(frameTimeNanos) → 计算 elapsedFraction (0~1) → Interpolator 计算 interpolatedFraction → TypeEvaluator 计算属性值 → 更新目标对象属性 → invalidate() 请求重绘 → 下一帧循环直到动画结束九、性能优化最佳实践9.1 避免掉帧表格优化手段说明使用硬件层view.animate().withLayer()或view.setLayerType(View.LAYER_TYPE_HARDWARE, null)避免主线程阻塞动画回调中不做 IO/复杂计算减少过度绘制使用 GPU 调试模式分析控制同时动画数MotionLayout 同时动画 50 个 View 可能掉帧使用 Profile GPU Rendering开发者选项中开启查看各阶段耗时9.2 各场景选型建议场景推荐方案简单属性变化位移、透明度ObjectAnimator/ViewPropertyAnimator复杂交互动效折叠头、拖拽MotionLayout新项目的所有动画Jetpack Compose Animation API列表项增删动画RecyclerView.ItemAnimator/ ComposeLazyColumnAnimatedVisibility跨页面共享元素SharedElementTransition/ ComposeSharedTransitionLayout复杂帧动画Lottie替代 AnimationDrawable9.3 Compose 动画性能Compose 动画基于重组Recomposition和智能跳过只有状态变化的 Composable 会重新执行使用remember缓存动画状态避免不必要的计算复杂动画使用LaunchedEffectAnimatable精确控制十、总结对比维度View 动画属性动画MotionLayoutCompose 动画实际改变属性❌ 否✅ 是✅ 是✅ 是非 View 对象❌ 不支持✅ 支持❌ 仅 View✅ 任意状态代码量中中少XML 声明少复杂交互❌ 困难⚠️ 较复杂✅ 擅长✅ 擅长维护性一般一般好优秀推荐度⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐2026 年建议新项目直接使用Jetpack Compose Compose Animation API维护中的传统项目复杂动画迁移到MotionLayout简单动画使用属性动画替代 View 动画。
