Jetpack Compose 动画使用指南⚡ 快速上手 Compose 动画6 大核心 API结合项目仓库地址目录animate*AsState — 最基础的动画AnimatedVisibility — 显示/隐藏动画updateTransition — 多值协同过渡Crossfade — 页面/内容切换AnimatedContent — 内容替换动画手势 动画常用 AnimationSpec实战建议1.animate*AsState— 最基础的动画单值用于alpha、size、color、offset、padding等单个值的过渡。颜色动画valcolorbyanimateColorAsState(targetValueif(isExpanded)Color.RedelseColor.Blue,animationSpectween(300))大小动画valsizebyanimateDpAsState(targetValueif(isExpanded)200.dpelse100.dp,animationSpecspring(stiffnessSpring.StiffnessLow))Alpha 淡入淡出valalphabyanimateFloatAsState(targetValueif(visible)1felse0f)支持类型一览函数用途示例animateFloatAsState浮点数alpha、rotation、scaleanimateDpAsState尺寸size、padding、elevationanimateColorAsState颜色background、text coloranimateIntAsState整数count、indexanimateOffsetAsState偏移量positionanimateContentSize内容尺寸LazyList 项变化2.AnimatedVisibility— 显示/隐藏动画varvisiblebyremember{mutableStateOf(true)}AnimatedVisibility(visiblevisible,enterfadeIn()slideInVertically(),exitfadeOut()slideOutVertically()){Text(Hello Compose)}enter/exit 组合动画类型函数描述淡入淡出fadeIn()/fadeOut()透明度变化滑动slideInHorizontally()/slideOutHorizontally()水平滑动滑动slideInVertically()/slideOutVertically()垂直滑动缩放scaleIn()/scaleOut()大小缩放展开收缩expandIn()/shrinkOut()尺寸展开/收缩组合示例AnimatedVisibility(visiblevisible,enterfadeIn()slideInVertically(initialOffsetY{-50})scaleIn(),exitfadeOut()slideOutVertically(targetOffsetY{50})scaleOut())3.updateTransition— 多值协同过渡适合多个属性同时动画且在状态切换时保持协调。varisExpandedbyremember{mutableStateOf(false)}valtransitionupdateTransition(isExpanded,labelboxTransition)valsizebytransition.animateDp(labelsize){state-if(state)200.dpelse100.dp}valcolorbytransition.animateColor(labelcolor){state-if(state)Color.RedelseColor.Blue}Box(modifierModifier.size(size).background(color).clickable{isExpanded!isExpanded})适用场景✅ 卡片展开/收起宽、高、圆角、阴影同时变化✅ 按钮状态切换颜色、大小、图标同时变化✅ 复杂组件状态联动4.Crossfade— 页面/内容切换varcurrentScreenbyremember{mutableStateOf(home)}Crossfade(targetStatecurrentScreen){screen-when(screen){home-HomeScreen()detail-DetailScreen()}}自定义过渡效果Crossfade(targetStatecurrentScreen,transitionSpec{fadeIn(animationSpectween(300))togetherWithfadeOut(animationSpectween(300))}){screen-// Content}适用场景✅ 页面切换✅ Tab 切换✅ 视图模式切换列表/网格5.AnimatedContent— 内容替换动画varcountbyremember{mutableStateOf(0)}AnimatedContent(targetStatecount,transitionSpec{fadeIn(animationSpectween(300))togetherWithfadeOut(animationSpectween(300))},labelcounter){targetCount-Text($targetCount,styleMaterialTheme.typography.headLarge)}方向感知动画AnimatedContent(targetStatecount,transitionSpec{if(targetStateinitialState){// 数字增加从右滑入slideInHorizontally{it}fadeIn()togetherWith slideOutHorizontally{-it}fadeOut()}else{// 数字减少从左滑入slideInHorizontally{-it}fadeIn()togetherWith slideOutHorizontally{it}fadeOut()}}){targetCount-Text($targetCount)}适用场景✅ 计数器✅ 列表项更新✅ 动态内容替换6. 手势 动画valoffsetXbyanimateFloatAsState(targetValuedragOffset,animationSpecspring(dampingRatioSpring.DampingRatioMediumBouncy,stiffnessSpring.StiffnessLow),labeldrag)// 使用 Modifier.offsetBox(modifierModifier.offset{IntOffset(offsetX.roundToInt(),0)})完整拖拽示例ComposablefunDraggableCard(){varoffsetXbyremember{mutableStateOf(0f)}valdraggableStaterememberDraggableState{delta-offsetXdelta}valanimatedOffsetbyanimateFloatAsState(targetValueoffsetX,animationSpecspring(dampingRatioSpring.DampingRatioMediumBouncy,stiffnessSpring.StiffnessLow))Box(modifierModifier.offset{IntOffset(animatedOffset.toInt(),0)}.draggable(statedraggableState,orientationOrientation.Horizontal,onDragStopped{velocity-if(abs(offsetX)100){offsetX300f// 滑出}else{offsetX0f// 弹回}}).size(200.dp).background(Color.Green,RoundedCornerShape(16.dp)))}适用场景✅ 拖拽卡片✅ 滑动删除✅ 可拖拽组件常用 AnimationSpec类型用途示例tween(durationMillis)线性过渡常配合 easingtween(300)spring(dampingRatio, stiffness)弹性/物理弹簧动画交互元素首选spring(stiffness Spring.StiffnessLow)repeatable循环动画loading、pulseinfiniteRepeatable(animation tween(500))snap()瞬时跳变snap()Spring 弹簧 — 弹性感强适合拖拽释放spring(dampingRatio0.6f,// 阻尼比0-1越小弹性越强stiffness300f// 刚度越大回弹越快)Easing 曲线tween(durationMillis400,easingFastOutSlowInEasing// 快出慢入)常用 EasingEasing效果LinearEasing匀速FastOutSlowInEasing快出慢入最常用FastOutLinearInEasing快出匀速入LinearOutSlowInEasing匀速出慢入实战建议 选择指南需求推荐 API理由UI 反馈动画animate*AsState最简单一行搞定状态切换多属性协同updateTransition保持动画同步进入/退出动画AnimatedVisibility内置 enter/exit 组合用户拖拽/滑动spring()动画物理感强别用tween()无限循环loadingrepeatable infiniteTransition性能优化页面切换Crossfade简洁优雅内容替换AnimatedContent支持方向感知✅ 推荐做法优先使用animate*AsState— 简单场景一行搞定交互元素用spring()— 物理感更强用户体验更好多属性联动用updateTransition— 保持动画同步列表用animateItem— 自动处理增删动画无限循环用infiniteTransition— 性能优化始终添加label参数— 调试时可追踪动画❌ 避免做法在 Compose 中使用 View 动画— 性能差且不兼容在动画中频繁创建状态— 会导致无限重绘忽略label参数— 调试时无法追踪动画在remember外创建动画— 每次重绘重置动画在交互式动画中使用tween()— 手感生硬用spring()快速查阅表┌─────────────────────────────────────────────────────────────┐ │ Compose 动画快速选择 │ ├─────────────────────────────────────────────────────────────┤ │ 单值变化 → animate*AsState │ │ 显示/隐藏 → AnimatedVisibility │ │ 多属性联动 → updateTransition │ │ 页面切换 → Crossfade │ │ 内容替换 → AnimatedContent │ │ 拖拽/手势 → draggable spring │ │ 无限循环 → infiniteTransition │ │ 列表项动画 → animateItem │ ├─────────────────────────────────────────────────────────────┤ │ 交互元素 → spring() │ │ 定时过渡 → tween() │ │ 循环加载 → infiniteRepeatable │ │ 瞬时变化 → snap() │ └─────────────────────────────────────────────────────────────┘