主页 / coding / 问题 / 78832566
Accepted
SwiftUIEnthusiast
Asked: 2024-08-05 10:50:14 +0800 CST

如何防止父视图动画覆盖子视图的动画？

  • 772

当用户按下按钮显示矩形时，文本的偏移动画不应被 .smooth(duration: 0.25) 覆盖，而是继续其 50 秒的线性动画。

以下是完整的示例。

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 个回答

  1. Best Answer

    使用.animation(nil, value: showingRect)来TextView表示当showingRect发生改变时，TextView不应该进行动画处理。

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

    如果您仍希望文本向上动画以适合新的矩形，请添加.geometryGroup：

    TextView()
    .geometryGroup()
    • 3

  2. 使用.transaction修饰符来隔离动画。还可以使用修饰符.animation来确保文本偏移动画继续，同时防止父视图的动画干扰。

    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

相关问题