时间戳

首页 > 解决方案 > SwiftUI 中 @GestureState 的显式动画

ios - SwiftUI 中 @GestureState 的显式动画

问题描述

我正在学习 SwiftUI 作为一种爱好，我正在尝试使用@GestureState如下所示创建一个可拖动的矩形视图。当视图被拖动时，我想为角和阴影半径的变化设置动画。Apple 文档中的示例对阴影部分使用了隐式动画，并删除了偏移修改器上方的所有动画。但是，因为我还想为圆角半径设置动画，所以我认为我需要明确地进行。这是我的第一次尝试：

struct DraggableView: View {
enum DragState {
    case inactive
    case pressing
    case dragging(translation: CGSize)
    
    var translation: CGSize {
        switch self {
        case .inactive, .pressing:
            return .zero
        case .dragging(let translation):
            return translation
        }
    }
    
    var isActive: Bool {
        switch self {
        case .inactive:
            return false
        case .pressing, .dragging:
            return true
        }
    }
    
    var isDragging: Bool {
        switch self {
        case .inactive, .pressing:
            return false
        case .dragging:
            return true
        }
    }
}

@GestureState var dragState = DragState.inactive

var body: some View {
    let minDuration = 0.5
    let longPressThenDrag = LongPressGesture(minimumDuration: minDuration)
        .sequenced(before: DragGesture())
        .updating($dragState) { value, state, transaction in
            transaction.animation = .easeInOut(duration: minDuration)
            switch value {
            case .first(true): // Long press begins
                state = .pressing
            case .second(true, let drag): // Dragging begins
                transaction.animation = nil // Do not animate translation update
                state = .dragging(translation: drag?.translation ?? .zero)
            default:
                state = .inactive
            }
        }
    
    return RoundedRectangle(cornerRadius: dragState.isActive ? 25 : 0)
        .frame(height: 150)
        .foregroundColor(.blue)
        .offset(
            x: dragState.translation.width,
            y: dragState.translation.height
        )
        .shadow(radius: dragState.isActive ? 25 : 0)
        .gesture(longPressThenDrag)
}

}

不幸的是，我遇到了两个问题。

  1. 当dragState设置回初始.inactive值时，更改不会动画：

屏幕录制：dragState 重置

  1. 当手势序列被突然打断时，影子表现得很奇怪：

屏幕录制：打断手势

任何想法如何解决这一问题？先感谢您。

标签： iosswiftanimationswiftuigesture-state

解决方案

我最终使用了这样的有条件设置的隐式动画：

return RoundedRectangle(cornerRadius: dragState.isActive ? 25 : 0)
    .frame(height: 150)
    .foregroundColor(.blue)
    .offset(
        x: dragState.translation.width,
        y: dragState.translation.height
    )
    .shadow(radius: dragState.isActive ? 25 : 0)
    .animation(dragState.isDragging ? nil : .easeInOut(duration: minDuration))
    .gesture(longPressThenDrag)

它解决了这两个问题。但是，如果有人可以明确地告诉我如何做到这一点，我仍然想知道。

推荐阅读