如何在Android Jetpack Compose中复刻Figma的Smart Animate过渡效果

你要的类Figma Smart Animate元素融合过渡效果，在Jetpack Compose里完全可以实现，不需要从零手写全量属性动画，官方提供的现有API已经可以覆盖绝大多数场景。

首选方案：使用官方共享元素过渡API #

这个API的底层逻辑和Figma Smart Animate完全一致：自动匹配两个布局中标记了相同key的元素，对位置、尺寸、颜色、透明度等可动画属性自动做插值过渡，不需要手动配置每个属性的动画规则。

配合Navigation Compose使用（最简便） #

如果你的页面切换是通过Navigation Compose实现的，只需要两步即可完成效果：

• 给两个页面中需要做过渡的对应元素（比如你提到的两个不同尺寸的应用栏）添加sharedElement修饰符，指定相同的key值：

// 页面A的应用栏
TopAppBar(
    modifier = Modifier.sharedElement(
        state = rememberSharedContentState(key = "common_top_bar"),
        animatedVisibilityScope = this@AnimatedContentScope
    ),
    // 其他属性配置
)

// 页面B的应用栏
TopAppBar(
    modifier = Modifier.sharedElement(
        state = rememberSharedContentState(key = "common_top_bar"),
        animatedVisibilityScope = this@AnimatedContentScope
    ),
    // 其他属性配置（尺寸、颜色、padding等可以和页面A完全不同）
)

• 在NavHost的页面切换动画配置中，启用共享元素过渡即可，系统会自动完成应用栏放大/缩小、位置移动的平滑过渡，效果和Figma Smart Animate基本一致。

单页面内布局切换场景 #

如果是同一个页面内的布局状态切换（比如点击展开应用栏），可以用AnimatedContent包裹布局，同样给对应元素加相同key的sharedElement修饰符，切换状态时就会自动触发过渡效果。

备选方案：使用MotionLayout #

如果你的过渡场景涉及多元素复杂联动，可以用Compose版的MotionLayout实现：

• 只需要定义切换前、切换后两个布局的约束条件
• 自定义过渡的时长、插值器等参数
• 运行时自动生成过渡动画，操作逻辑和Figma中设置两个帧做Smart Animate几乎完全一致，可定制性更高。

注意事项 #

• 如果两个目标元素的内部子组件存在差异，可以给子组件也分别设置对应的共享key，系统会自动处理子组件的淡入淡出、位移过渡，避免出现内容跳变
• 有特殊动画要求时，只需要给sharedElement的animationSpec参数传入自定义的spring/tween配置即可，不需要修改其他逻辑
• 页面其他非共享元素可以搭配正常的滑入、淡入等整体过渡效果，不会影响共享元素的独立过渡

内容的提问来源于stack exchange，提问作者dbarnes