Improve SwipeToDismiss modifier UX

This commit adds an opacity transition when swiping to dismiss an item,
to make it clear that the user is about to dismiss it.

Changelog-Changed: Swipe to dismiss on full screen carousel now shows an opacity effect for improved UX
Signed-off-by: Daniel D’Aquino <daniel@daquino.me>
This commit is contained in:
Daniel D’Aquino
2024-11-01 17:57:39 -07:00
parent 1d5af6ca5c
commit a56a59f81d

View File

@@ -12,11 +12,15 @@ struct SwipeToDismissModifier: ViewModifier {
var onDismiss: () -> Void
@State private var offset: CGSize = .zero
@GestureState private var viewOffset: CGSize = .zero
let threshold_offset: CGFloat = 100.0
let minimum_opacity: CGFloat = 0.1
func body(content: Content) -> some View {
content
.offset(y: viewOffset.height)
.animation(.interactiveSpring(), value: viewOffset)
.opacity(max(min(1.0 - (abs(offset.height) / threshold_offset), 1.0), minimum_opacity))
.simultaneousGesture(
DragGesture(minimumDistance: minDistance ?? 10)
.updating($viewOffset, body: { value, gestureState, transaction in
@@ -28,7 +32,7 @@ struct SwipeToDismissModifier: ViewModifier {
}
}
.onEnded { _ in
if abs(offset.height) > 100 {
if abs(offset.height) > threshold_offset {
onDismiss()
} else {
offset = .zero