Início / coding / Perguntas / 78691916
Accepted
Duck
Asked: 2024-07-01 19:18:23 +0800 CST

Como animar um menu de círculo para oval assim?

  • 772

Considere este código:

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

Este código mostra um globo branco sobre um círculo branco como este, inicialmente.

insira a descrição da imagem aqui

Quando você toca no círculo, o menu se expande para ser uma elipse com outros dois globos.

insira a descrição da imagem aqui

Os globos preto e amarelo aparecem desaparecendo ao mesmo tempo que a elipse se expande, mas não é isso que eu quero.

Quero que todos os globos sejam empilhados na mesma posição central. Neste ponto, apenas o globo central é visível e os outros dois são invisíveis. À medida que o círculo vermelho é tocado e começa a se expandir, quero que o globo 1 se mova para a esquerda e o globo 3 se mova para a direita, enquanto eles perseguiam a nova fronteira que está se expandindo. Ao mesmo tempo em que estão se movendo, estão mudando a transparência para 1.

Se a elipse agora for tocada, quero que aconteça o inverso.

como faço isso?

animation

1 respostas

  1. Best Answer

    Em vez de animações, as transições são muito melhores nisso. Porque eles são feitos para animar a ocultação e exibição de visualizações.

    Resultado

    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

relate perguntas