SwiftUI - SnapDraggingModifier

这是一个小型 SwiftUI 包,允许创建可拖动视图,并追踪拖动操作的速度,这可以用于在拖动释放时创建流畅的动画。 此组件对于创建交互式用户界面和增强其流畅性非常有帮助。

关于流畅界面: https://developer.apple.com/videos/play/wwdc2018/803/

UIKit 版本 FluidInterfaceKit/FluidGesture 模块

示例

投掷一个球

Circle()
  .fill(Color.blue)
  .frame(width: 100, height: 100)
  .modifier(SnapDraggingModifier())

固定拖动方向和橡皮筋效果

RoundedRectangle(cornerRadius: 16, style: .continuous)
  .fill(Color.blue)
  .frame(width: 120, height: 50)
  .modifier(
    SnapDraggingModifier(
      axis: [.vertical],
      verticalBoundary: .init(min: -10, max: 10, bandLength: 50)
    )
  )

投掷到指定点

“当手势结束时,modifier 会请求目标点,并且视图将使用基于速度的动画平滑地移动到指定点。”

RoundedRectangle(cornerRadius: 16, style: .continuous)
  .fill(Color.blue)
  .frame(width: nil, height: 50)
  .modifier(
    SnapDraggingModifier(
      axis: .horizontal,
      horizontalBoundary: .init(min: 0, max: .infinity, bandLength: 50),
      handler: .init(onEndDragging: { velocity, offset, contentSize in

        print(velocity, offset, contentSize)

        if velocity.dx > 50 || offset.width > (contentSize.width / 2) {
          print("remove")
          return .init(width: contentSize.width, height: 0)
        } else {
          print("stay")
          return .zero
        }
      })
    )
  )