Início / coding / Perguntas / 78832566
Accepted
SwiftUIEnthusiast
Asked: 2024-08-05 10:50:14 +0800 CST

Como evitar que as animações da visualização pai substituam as de uma visualização filho?

  • 772

Quando o usuário pressiona o botão para mostrar o retângulo, a animação de deslocamento do texto não deve ser substituída por .smooth(duration: 0.25) mas, em vez disso, continuar sua animação linear de 50 segundos.

Abaixo está o exemplo completo.

struct ContentView: View {
    @State private var showingRect = false
    var body: some View {
        VStack {
            Button("Show Rect") {
                withAnimation(.smooth(duration: 0.25)) {
                    showingRect.toggle()
                }
            }
            
            TextView()
            
            if showingRect {
                Rectangle()
                    .foregroundStyle(.blue)
                    .frame(width: 100, height: 100)
            }
            
        }
        .padding()
    }
}

struct TextView: View {
    @State private var animate = false
    
    var body: some View {
        Text("This is a very long text. Yeah, it is very very long.")
            .lineLimit(1)
            .offset(x: animate ? -300 : 0)
            .onAppear {
                withAnimation(.linear(duration: 50)) {
                    animate = true
                }
            }
    }
}
swift

2 respostas

  1. Best Answer

    Use .animation(nil, value: showingRect)on TextViewpara dizer que quando showingRectmuda, TextViewnão deve ser animado.

    TextView()
    .animation(nil, value: showingRect)

    Se você ainda deseja que o texto seja animado para cima para caber no novo retângulo, adicione .geometryGroup:

    TextView()
    .geometryGroup()
    • 3

  2. Use o .transactionmodificador para isolar as animações. Use também o .animationmodificador para garantir que a animação do deslocamento do texto continue, evitando que a animação da visualização pai interfira.

    struct ContentView: View {
    @State private var showingRect = false
    
    var body: some View {
        VStack {
            Button("Showing Rect") {
                withAnimation(.smooth(duration: 0.25)) {
                    showingRect.toggle()
                }
            }
            
            TextView()
            
            if showingRect {
                Rectangle()
                    .foregroundStyle(.blue)
                    .frame(width: 100, height: 100)
            }
        }
        .padding()
    }
}

struct TextView: View {
    @State private var animate = false
    
    var body: some View {
        Text("This is a very long text. Yeah, it is very very long.")
            .lineLimit(1)
            .offset(x: animate ? -300 : 0)
            .animation(.linear(duration: 50), value: animate)
            .onAppear {
                animate = true
            }
    }
}
    • 0

relate perguntas