主页 / coding / 问题 / 78691916
Accepted
Duck
Asked: 2024-07-01 19:18:23 +0800 CST

如何使菜单从圆形变为椭圆形？

  • 772

考虑以下代码：

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。

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

我怎么做？

animation

1 个回答

  1. Best Answer

    相比动画，过渡在这方面表现更好。因为它们是为隐藏和显示视图的动画而设计的。

    结果

    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()
    }
}
    • 1

相关问题