Jetpack Compose中多FAB动画不同条件的行为差异解析

在Android Compose项目中实现可展开FAB时，通过FabState枚举控制展开/收起状态，不同的显示条件会直接影响子按钮的动画表现，以下是三个条件的具体影响：

1. 条件：if (transition.currentState == FabState.Expanded) #

transition.currentState代表动画启动前的初始状态：

• 展开操作（从Collapsed→Expanded）：触发切换时，currentState仍为Collapsed，条件不成立，子按钮不会被Compose渲染，因此展开动画（alpha、scale从0到1）没有执行载体，看不到动画效果。
• 收起操作（从Expanded→Collapsed）：触发切换时，currentState初始为Expanded，条件成立，子按钮会被保留直到动画完成。动画过程中alpha、fabScale从1过渡到0，完成后currentState变为Collapsed，子按钮才被移除，因此能看到完整的收起动画。

2. 条件：if (fabState == FabState.Expanded) #

fabState是FAB的目标状态，状态切换时会立即更新为目标值：

• 展开操作：触发切换后fabState立刻变为Expanded，条件成立，子按钮被渲染出来，动画值（alpha、scale）从0平滑过渡到1，能看到完整的展开动画。
• 收起操作：触发切换后fabState立刻变为Collapsed，条件不成立，子按钮直接被Compose移除，动画还未执行就失去了载体，因此看不到收起动画。

3. 条件：if (fabState == FabState.Expanded || transition.currentState == FabState.Expanded) #

这个条件同时覆盖了目标状态和动画初始状态：

• 展开操作：fabState变为Expanded，条件成立，子按钮被渲染，动画正常执行。
• 收起操作：虽然fabState立刻变为Collapsed，但transition.currentState此时仍为Expanded，条件依然成立，子按钮会被保留直到动画完成（此时currentState切换为Collapsed），因此收起动画也能完整展示。
  最终实现了展开和收起操作都有动画的效果。

内容的提问来源于stack exchange，提问作者Marco Pinedo del Rio