swiftui - 如何阻止 SwiftUI DragGesture 为 subview 设置动画

标签 swiftui draggesture

我正在构建一个自定义模态,当我拖动模态时,任何附加了动画的 subview 都会在我拖动时进行动画处理。我该如何阻止这种情况发生?
我想过传递一个 @EnvironmentObjectisDragging标志,但它的可扩展性不是很好(并且不适用于自定义 ButtonStyle s)

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello, world!")
            .padding()
            .showModal(isShowing: .constant(true))
    }
}

extension View {
    func showModal(isShowing: Binding<Bool>) -> some View {
        ViewOverlay(isShowing: isShowing, presenting: { self })
    }
}

struct ViewOverlay<Presenting>: View where Presenting: View {
    @Binding var isShowing: Bool
    
    let presenting: () -> Presenting
    
    @State var bottomState: CGFloat = 0
    
    var body: some View {
        ZStack(alignment: .center) {
            presenting().blur(radius: isShowing ? 1 : 0)
            VStack {
                if isShowing {
                    Container()
                        .background(Color.red)
                        .offset(y: bottomState)
                        .gesture(
                            DragGesture()
                                .onChanged { value in
                                    bottomState = value.translation.height
                                }
                                .onEnded { _ in
                                    if bottomState > 50 {
                                        withAnimation {
                                            isShowing = false
                                        }
                                    }
                                    bottomState = 0
                                })
                        .transition(.move(edge: .bottom))
                }
            }
        }
    }
}

struct Container: View {
    var body: some View {
// I want this to not animate when dragging the modal
        Text("CONTAINER")
            .frame(maxWidth: .infinity, maxHeight: 200)
            .animation(.spring())
    }
}


ui
更新:
extension View {
    func animationsDisabled(_ disabled: Bool) -> some View {
        transaction { (tx: inout Transaction) in
            tx.animation = tx.animation
            tx.disablesAnimations = disabled
        }
    }
}


Container()
   .animationsDisabled(isDragging || bottomState > 0)

在现实生活中,容器包含一个按钮,在其按下状态下会有动画
struct MyButtonStyle: ButtonStyle {
    func makeBody(configuration: Self.Configuration) -> some View {
        configuration.label
            .scaleEffect(configuration.isPressed ? 0.9 : 1)
            .animation(.spring())
    }
}
向 subview 添加了 animationsDisabled 函数,它实际上阻止了 subview 在拖动过程中的移动。
它不会在最初滑入或关闭时停止动画。
有没有办法知道 View 何时基本上没有移动/过渡?

最佳答案

理论上 SwiftUI 在这种情况下不应该翻译动画,但是我不确定这是否是一个错误——我不会以那种通用的方式在 Container 中使用动画。我使用动画的次数越多,就越倾向于将它们直接连接到特定值。
无论如何......这是可能的解决方法 - 通过在中间注入(inject)不同的托管 Controller 来破坏动画可见性。
使用 Xcode 12/iOS 14 测试
demo

struct ViewOverlay<Presenting>: View where Presenting: View {
    @Binding var isShowing: Bool
    
    let presenting: () -> Presenting
    
    @State var bottomState: CGFloat = 0
    
    var body: some View {
        ZStack(alignment: .center) {
            presenting().blur(radius: isShowing ? 1 : 0)
            VStack {
                    Color.clear
                if isShowing {
                        HelperView {
                    Container()
                        .background(Color.red)
                        }
                        .offset(y: bottomState)
                        .gesture(
                             DragGesture()
                                  .onChanged { value in
                                        bottomState = value.translation.height
                                  }
                                  .onEnded { _ in
                                        if bottomState > 50 {
                                             withAnimation {
                                                  isShowing = false
                                             }
                                        }
                                        bottomState = 0
                                  })
                        .transition(.move(edge: .bottom))
                }
                    Color.clear
            }
        }
    }
}

struct HelperView<Content: View>: UIViewRepresentable {
    let content: () -> Content
    func makeUIView(context: Context) -> UIView {
        let controller = UIHostingController(rootView: content())
        return controller.view
    }
    
    func updateUIView(_ uiView: UIView, context: Context) {
    }
}

关于swiftui - 如何阻止 SwiftUI DragGesture 为 subview 设置动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64088038/

相关文章:

ios - 如何在 SwiftUI 中禁用 iOS 可达性滑动手势

swiftui - SwiftUI 中 DragGesture 和 ScrollView 的交互

swift - “Int”无法转换为 'CGFloat' Swift UI

swift - 如何更改 SwiftUI 中分段选取器的颜色外观?

swiftui - .previewLayout(PreviewLayout.fixed(width :_, height:_)) 在 Xcode 14 中不起作用

list - 将带标题的部分添加到具有可扩展行的 SwiftUI 列表

SwiftUI 标签栏颜色

ios - 如何仅在 swiftUI 中将拖动手势限制到特定帧