https://github.com/fluidgroup/swiftui-snap-dragging-modifier

An essential component for making fluid interface with SwiftUI.
https://github.com/fluidgroup/swiftui-snap-dragging-modifier

Last synced: about 1 year ago
JSON representation

An essential component for making fluid interface with SwiftUI.

• Host: GitHub
• URL: https://github.com/fluidgroup/swiftui-snap-dragging-modifier
• Owner: FluidGroup
• License: apache-2.0
• Created: 2023-05-06T17:51:51.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2025-04-09T03:13:05.000Z (about 1 year ago)
• Last Synced: 2025-04-09T16:17:41.769Z (about 1 year ago)
• Language: Swift
• Homepage:
• Size: 35.2 KB
• Stars: 73
• Watchers: 5
• Forks: 7
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# SwiftUI - SnapDraggingModifier 

This is a small SwiftUI package that allows for the creation of a draggable view and tracks the velocity of the dragging action, which can be used to create fluid animations when the drag is released. This component is a big help in creating interactive user interfaces and enhancing their fluidity.

About Fluid interfaces : https://developer.apple.com/videos/play/wwdc2018/803/

> [UIKit Version](https://github.com/FluidGroup/FluidInterfaceKit) FluidInterfaceKit/FluidGesture module

## Examples

**Throwing a ball**



```swift

Circle()

  .fill(Color.blue)

  .frame(width: 100, height: 100)

  .modifier(SnapDraggingModifier())

```

---

**Fixed draggable direction and rubber banding effect**



```swift

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)

    )

  )

```

---

**Thowing to the point**



"The modifier asks for the destination point when the gesture ends, and the view will smoothly move to the specified point with velocity-based animation."

```swift

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

        }

      })

    )

  )

```