关闭具有比例效果的手势

Question

当我添加一个拖动手势来关闭我的“大视图”时，它会缩放到手势的数量，但如果它关闭，视图会跳转到其原始比例并将视图动画化为“小视图”。

这是我的示例代码：`struct TestView: View { @State var showBigView = false

@Namespace private var animationNameSpace

@State var gestureOffset: CGSize = .zero

var body: some View {
    ZStack {
        if !showBigView {
            Image(systemName: "tshirt")
                .resizable()
                .scaledToFit()
                .foregroundColor(.red)
                .matchedGeometryEffect(id: "circel", in: animationNameSpace)
                .transition(.scale(scale: 1))
                .frame(width: 100, height: 100)
                .onTapGesture {
                    withAnimation {
                        showBigView = true
                    }
                }
        } else {
            Image(systemName: "tshirt")
                .resizable()
                .scaledToFit()
                .foregroundColor(.red)
                .matchedGeometryEffect(id: "circel", in: animationNameSpace)
                .transition(.scale(scale: 1))
                .frame(width: 300, height: 300)
                .scaleEffect(abs(gestureOffset.height / 1000 - 1))
                .gesture(DragGesture().onChanged {
                    guard $0.translation.height > 0 else { return }
                    self.gestureOffset = $0.translation

                    if abs($0.translation.height) > 150 {
                        withAnimation {
                            showBigView = false
                            gestureOffset = .zero
                        }
                    }
                })
        }
    }
}

}`

当视图以特定的 scaleEffect 消失时，它不应该跳转。

Answer 1

我相信您正在尝试：

• 以 100 x 100 的帧显示 T 恤图像。
• 点击时，它会增长到 300 x 300 帧，帧数为 animation。
• 向下拖动会缩小图像。 当拖动高度超过 150 点时，图像将缩小到其原始 100 x 100 帧 animation。

这种方法有效：

struct TestView: View {
    @State private var isBig = false
    @State private var frame = TestView.smallFrame
    @State private var scale = 1.0
    static private let smallFrame = 100.0
    static private let bigFrame = 300.0
    
    var body: some View {
        Image(systemName: "tshirt")
            .resizable()
            .scaledToFit()
            .frame(width: frame, height: frame)
            .scaleEffect(scale)
            .foregroundColor(.red)
            .onTapGesture {
                if !isBig {
                    withAnimation {
                        frame = TestView.bigFrame
                    }
                    isBig = true
                }
            }
            .gesture(DragGesture().onChanged {
                let dragHeight = $0.translation.height
                if isBig && dragHeight > 0 {
                    if dragHeight >= 150 {
                        frame = TestView.bigFrame * scale
                        scale = 1
                        withAnimation {
                            frame = TestView.smallFrame
                        }
                        isBig = false
                    } else {
                        scale = 1 - (dragHeight / 1000)
                    }
                }
            }.onEnded { _ in
                withAnimation {
                    scale = 1
                }
            })
    }
}

没有必要创建两个单独的图像并将它们与matchedGeometryEffect同步。 相反，您可以使用@State boolean 来控制手势是否有任何效果。