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:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user