代码之家 › 专栏 › 技术社区 › Duck

如何设置菜单从圆形到椭圆形的动画?

swiftui animation

Duck · 技术社区 · 5 月前

请考虑以下代码:

import SwiftUI

struct ContentView: View {
  @State private var hidden = true
    var body: some View {
        HStack {
          Group{
            if !hidden {
              Image(systemName: "globe")
                .imageScale(.large)
                .foregroundStyle(Color.black)
                .font(.system(size: 50))
                .opacity(hidden ? 0 : 1)
                .animation(.easeInOut(duration: 0.5).delay(1), value: hidden)
            }
            Image(systemName: "globe")
              .imageScale(.large)
              .foregroundStyle(Color.white)
              .font(.system(size: 50))
            
            if !hidden {
              Image(systemName: "globe")
                .imageScale(.large)
                .foregroundStyle(Color.yellow)
                .font(.system(size: 50))
                .opacity(hidden ? 0 : 1)
                .animation(.easeInOut(duration: 0.5).delay(3), value: hidden)    
            }
          }
          .padding(.horizontal, 10)
          .padding(.vertical, 5)              
        }
        .onTapGesture {
          withAnimation{
            hidden.toggle()
          }
        }
        .background(
          RoundedRectangle(cornerSize: CGSize(width: 50,height: 50))
            .fill(.red)
        )
        .padding()
    }
}

#Preview {
    ContentView()
}

这个代码最初在一个白色圆圈上显示一个白色的地球仪,如下图所示。

当您点击圆形时,菜单将扩展为一个带有另外两个球体的椭圆。

黑色和黄色的球体在椭圆膨胀的同时逐渐消失,但这不是我想要的。

我希望所有的地球仪都堆在同一个中心位置。此时,只有中心球体可见,其他两个不可见。当红色圆圈被点击并开始扩展时,我希望地球仪1向左移动,地球仪3向右移动,因为他们正在追逐正在扩展的新边界。在移动的同时,它们将透明度更改为1。

如果现在的椭圆被点击,我希望相反的情况发生。

我该怎么做?

1 回复 | 直到 5 月前

Radioactive 5 月前

与动画不同,过渡在这方面要好得多。因为它们是为设置视图的隐藏和显示动画而制作的。

Result

struct ContentView: View {
  @State private var hidden = true
    
    var body: some View {
        HStack {
            Group {
                if !hidden {
                    Image(systemName: "globe")
                        .imageScale(.large)
                        .foregroundStyle(Color.black)
                        .font(.system(size: 50))
                        .zIndex(0)
                        .transition(.offset(x: 100, y: 0).combined(with: .opacity))
                }
                Image(systemName: "globe")
                    .imageScale(.large)
                    .foregroundStyle(Color.white)
                    .font(.system(size: 50))
                    .zIndex(1)
                
                if !hidden {
                    Image(systemName: "globe")
                        .imageScale(.large)
                        .foregroundStyle(Color.yellow)
                        .font(.system(size: 50))
                        .font(.system(size: 50))
                        .zIndex(0)
                        .transition(.offset(x: -100, y: 0).combined(with: .opacity))
                }
            }
            .padding(.horizontal, 10)
            .padding(.vertical, 5)
        }
        .onTapGesture {
            withAnimation{
                hidden.toggle()
            }
        }
        .background(
            RoundedRectangle(cornerSize: CGSize(width: 50,height: 50))
                .fill(.red)
        )
        .padding()
    }
}