Drag gesture pushed slider with x and y offsets animated by totally different curves leads to animation conflicts that trigger nib to separate from slider [duplicate]

I understand SwiftUI has a in-built Slider. Nonetheless for my app I need to have a way more customized look in addition to numerous totally different behaviors. As well as there are guidelines that transfer all the sliders over-all x offset in order that it could sit on the sting of the display screen and are available out from the sting when dragged or beneath different situations (give it some thought like a drawer). I simplified my slider view with this difficulty all the way down to this minimal slider class which reproduces the issue.

struct Slider: View {
    let sliderHeight: CGFloat = 300
    
    @State var sliderYOffset: CGFloat = 0
    @State var dragging: Bool = false
    
    var physique: some View {
        ZStack(alignment: .backside) {
            Colour.grey
                .body(width: 20, top: sliderHeight)
            
            Colour.blue
                .body(width: 30, top: 30)
                .clipShape(Circle())
                .clipped()
                .offset(y: sliderYOffset + 15)
                .animation(.spring(response: 0.3, dampingFraction: 0.6, blendDuration: 0.5), worth: sliderYOffset)
        }
        .offset(x: dragging ? 100 : 0)
        .animation(.easy(length: 1), worth: dragging)
        .gesture(
            DragGesture(minimumDistance: 0)
                .onChanged { gesture in
                    sliderYOffset = max(min(gesture.location.y, sliderHeight), 0) - sliderHeight
                    dragging = true
                }
                .onEnded { _ in
                    dragging = false
                }
        )
    }
}

As you possibly can see the blue nib animates with the y-offset of the gesture utilizing a spring animation. Nonetheless the entire slider view animates with an x-offset pushed by whether or not the gesture is energetic.

If all the pieces went accurately I might hope to see that once I begin dragging the slider and the nib transfer as one to the best with the nib monitoring the y offset of the drag with a easy spring animation.

As a substitute what performs out is a reasonably variable course of. I can inform I’ve confused SwiftUIs animation system because it by no means performs out the identical method. I consider the 2 animation transactions are conflicting in a method that’s considerably undefined. However nonetheless I can’t fairly clarify what permits the blue nib to separate from the remainder of the slider.

Its virtually as if both (or each):

• On the beginning of the drag gesture I could in principle begin each a spring animation and a easy animation. Maybe beginning these in the identical second creates confusion in CA transactions.
• SwiftUI treats offset as an x y pair even in the event you cut up out the offsets into two totally different view modifiers.

How would possibly I am going about fixing this drawback? An overlay doesn’t appear to repair it. How does Apple handle to forestall issues like this from taking place no-matter the transactions I’d create exterior to system UI that has an animation?