SwiftUI: Reset "Slide to Unlock" button after drag gesture - ios

Question

I want to make my slider go back to its original position after I have unlocked it once by dragging to the end.
The animation goes till the end and stays there.
I want it to go back to its initial position once the unlock swipe is complete, meaning once the unlock lock image is shown, it should reset to again being locked.
How can I achieve this?
I am attaching complete code. It has three components, Dragging component and background component that are being called in main Unlock button view.
//
// DraggingComponent.swift
// VirtualDoorman
//
// Created by Engr. Bushra on 11/9/22.
//
import SwiftUI
struct DraggingComponent: View {
#Binding var isLocked: Bool
let isLoading: Bool
let maxWidth: CGFloat
private let minWidth = CGFloat(50)
#State private var width = CGFloat(50)
var duration: Double = 0.3
var body: some View {
RoundedRectangle(cornerRadius: 16)
.fill(Color.red)
.opacity(width / maxWidth)
.frame(width: width)
.overlay(
Button(action: { }) {
ZStack {
image(name: "lock", isShown: isLocked)
progressView(isShown: isLoading)
image(name: "lock.open", isShown: !isLocked && !isLoading)
}
.animation(.easeIn(duration: 0.35).delay(0.55), value: !isLocked && !isLoading)
}
.buttonStyle(BaseButtonStyle())
.disabled(!isLocked || isLoading),
alignment: .trailing
)
.simultaneousGesture (
DragGesture()
.onChanged { value in
guard isLocked else { return }
if value.translation.width > 0 {
width = min(max(value.translation.width + minWidth, minWidth), maxWidth)
}
}
.onEnded { value in
guard isLocked else { return }
if width < maxWidth {
width = minWidth
UINotificationFeedbackGenerator().notificationOccurred(.warning)
} else {
UINotificationFeedbackGenerator().notificationOccurred(.success)
withAnimation(.spring().delay(0.5)) {
isLocked = false
// DispatchQueue.main.asyncAfter(deadline: .now() + duration + 0.2) {
// withAnimation(.easeOut(duration: duration)) {
// width = min(max(value.translation.width + minWidth, minWidth), maxWidth)
//
// }
// }
// isLocked = true
}
}
}
)
.animation(.spring(response: 0.5, dampingFraction: 1, blendDuration: 0), value: width)
}
private func image(name: String, isShown: Bool) -> some View {
Image(systemName: name)
.font(.system(size: 20, weight: .regular, design: .rounded))
.foregroundColor(Color("BlueAccent"))
.frame(width: 42, height: 42)
.background(RoundedRectangle(cornerRadius: 14).fill(.white))
.padding(4)
.opacity(isShown ? 1 : 0)
.scaleEffect(isShown ? 1 : 0.01)
}
private func progressView(isShown: Bool) -> some View {
ProgressView()
.progressViewStyle(.circular)
.tint(.white)
.opacity(isShown ? 1 : 0)
.scaleEffect(isShown ? 1 : 0.01)
}
}//struct
//struct DraggingComponent_Previews: PreviewProvider {
// static var previews: some View {
// DraggingComponent(maxWidth: 10)
// }
//}
struct BaseButtonStyle: ButtonStyle {
func makeBody(configuration: Configuration) -> some View {
configuration.label
.scaleEffect(configuration.isPressed ? 0.95 : 1)
.opacity(configuration.isPressed ? 0.9 : 1)
.animation(.default, value: configuration.isPressed)
}
}
//
// BackgroundComponent.swift
// VirtualDoorman
//
// Created by Engr. Bushra on 11/9/22.
//
import SwiftUI
struct BackgroundComponent: View {
#State private var hueRotation = false
var body: some View {
ZStack(alignment: .leading) {
RoundedRectangle(cornerRadius: 16)
.fill(LinearGradient(
colors: [Color("BlueAccent").opacity(0.8), Color("BlueAccent").opacity(0.8)],
startPoint: .leading,
endPoint: .trailing
)
)
.hueRotation(.degrees(hueRotation ? 20 : -20))
Text("Slide to unlock")
.font(.footnote)
.bold()
.foregroundColor(.white)
.frame(maxWidth: .infinity)
}
.onAppear {
withAnimation(.linear(duration: 3).repeatForever(autoreverses: true)) {
hueRotation.toggle()
}
}
}
}
struct BackgroundComponent_Previews: PreviewProvider {
static var previews: some View {
BackgroundComponent()
}
}
extension Color {
static let pinkBright = Color(red: 247/255, green: 37/255, blue: 133/255)
static let blueBright = Color(red: 67/255, green: 97/255, blue: 238/255)
static let blueDark = Color(red: 58/255, green: 12/255, blue: 163/255)
}
//
// Unlock_Button.swift
// VirtualDoorman
//
// Created by Engr. Bushra on 11/9/22.
//
import SwiftUI
struct Unlock_Button: View {
#State private var isLocked = true
#State private var isLoading = false
var completion: (() -> Void)?
var body: some View {
GeometryReader { geometry in
ZStack(alignment: .leading) {
BackgroundComponent()
DraggingComponent(isLocked: $isLocked, isLoading: isLoading, maxWidth: geometry.size.width)
}
}
.frame(height: 50)
.padding()
.onChange(of: isLocked) { isLocked in
guard !isLocked else { return }
simulateRequest()
}
}
private func simulateRequest() {
isLoading = true
// completion?()
DispatchQueue.main.asyncAfter(deadline: .now() + 1.5) {
isLoading = false
}
}
}
struct Unlock_Button_Previews: PreviewProvider {
static var previews: some View {
Unlock_Button()
}
}