如何从 Compose 中的 FAB 重新创建 Material Design Speed Dial 动画？

Question

我正在尝试为 Material Design website 上显示的扩展快速拨号重新创建动画，但我正在努力在 Compose 中获得完全相同的结果。现在我尝试使用 ColumnScope 的 AnimatedVisibility，但我不认为可以复制相同的行为。

关于如何实现这一点有什么建议吗？

Answer 1

我使用浮动操作按钮快速拨号库找到了预期的输出。

该库在 Jcenter 上可用，因此不需要额外的存储库。

检查是否得到了想要的结果https://github.com/leinardi/FloatingActionButtonSpeedDial。

Answer 2

一定可以实现，这是肯定的。我目前能想到的一种方法是这样的：

创建一个接受状态 (shown/hidden) 和您需要的任何其他参数的可组合项。在其中，为每个拨号项的可见性创建一个 state-holder，并在它们之间以一定的毫秒间隔触发动画。

像这样

@Composable
fun SpeedDial(expanded: Boolean){
 LaunchedEffect(expanded){
  handleAnimation()
 }

 val visibilityList = remember { mutableStateListOf<Boolean>(/* List Of Booleans */) }
 AnimatedVisibility(visible == visibilityList(0)){
  Item1() // Visible only if the first item in list is visible
 } 

 // Copy-paste for other items

 suspend fun handleAnimation() {
  visibilityList.forEachIndexed { index, visibility ->
    visibilityList.set(index, expanded)
    delay(150) // Alter per-requirement
  }
 }

}

这样应该可以达到不卡顿的效果。试试吧。

如何从 Compose 中的 FAB 重新创建 Material Design Speed Dial 动画？

How to recreate the Material Design Speed Dial animation from the FAB in Compose?

material-design

android-jetpack-compose