From a56a59f81de5e3983f9fb19742eba20f08779a61 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20D=E2=80=99Aquino?= Date: Fri, 1 Nov 2024 17:57:39 -0700 Subject: [PATCH] Improve SwipeToDismiss modifier UX MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- damus/Modifiers/SwipeToDismiss.swift | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/damus/Modifiers/SwipeToDismiss.swift b/damus/Modifiers/SwipeToDismiss.swift index 32f18bdb..99276e0b 100644 --- a/damus/Modifiers/SwipeToDismiss.swift +++ b/damus/Modifiers/SwipeToDismiss.swift @@ -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