In this tutorial, We will learn how to create animated floating Menu UI.

在本教程中，我们将学习如何创建动画的浮动菜单UI。

实施逻辑 (Implementation Logic)

1. Create a Floating Button.
   创建一个浮动按钮。
2. Create menu above Floating Button in a vertical stack
   在垂直堆栈中的浮动按钮上方创建菜单
3. Move this vertical stack to Bottom right
   将此垂直堆栈移动到右下角
4. Hide show button with animation
   隐藏带有动画的显示按钮

创建一个浮动按钮 (Creating a Floating Button)

Button(action: {}, label: {
   Image(systemName: "plus")
     .foregroundColor(.white)
     .font(.headline)
     .frame(width: 60, height: 60)
})
.background(Color.blue)
.clipShape(Circle())
.padding(.all, 10)

在垂直堆栈中的“浮动按钮”上方创建菜单，并将此垂直堆栈移到右下角 (Create menu above Floating Button in a vertical stack and Move this vertical stack to Bottom right)

HStack {  
  Spacer() //Move all item to right
  VStack {
     Spacer() //Move all item to bottom
     ForEach(/*for all item in menu*/) {
        ///Set All floating Button
     }
     //Main Floating Button  }
}

隐藏带有动画的显示按钮 (Hide show button with animation)

Add a State to show and hide button. Add show/hide logic in animation block.

添加一个状态来显示和隐藏按钮。 在动画块中添加显示/隐藏逻辑。

Done!

做完了！

最终演示： (Final Demo:)