tyiu/damus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve SwipeToDismiss modifier UX

Browse Source 
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
1 changed files with 5 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
damus/Modifiers/SwipeToDismiss.swift
View File

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