21.7 C
Canberra
Tuesday, October 21, 2025

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


I notice SwiftUI has a inbuilt Slider. Nevertheless for my app I wish to have a way more customized look in addition to numerous completely different behaviors. As well as there are guidelines that transfer all the sliders over-all x offset in order that it will possibly 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 problem 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) {
            Coloration.grey
                .body(width: 20, peak: sliderHeight)
            
            Coloration.blue
                .body(width: 30, peak: 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(period: 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 may see the blue nib animates with the y-offset of the gesture utilizing a spring animation. Nevertheless the entire slider view animates with an x-offset pushed by whether or not the gesture is lively.

If the whole lot went accurately I might hope to see that after I begin dragging the slider and the nib transfer as one to the appropriate with the nib monitoring the y offset of the drag with a easy spring animation.

As an alternative 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 means. I imagine the 2 animation transactions are conflicting in a means that’s considerably undefined. However nonetheless I can not fairly clarify what permits the blue nib to separate from the remainder of the slider.

Its nearly as if both (or each):

  • On the beginning of the drag gesture I could in concept 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 case you cut up out the offsets into two completely different view modifiers.

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

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

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

[td_block_social_counter facebook="tagdiv" twitter="tagdivofficial" youtube="tagdiv" style="style8 td-social-boxed td-social-font-icons" tdc_css="eyJhbGwiOnsibWFyZ2luLWJvdHRvbSI6IjM4IiwiZGlzcGxheSI6IiJ9LCJwb3J0cmFpdCI6eyJtYXJnaW4tYm90dG9tIjoiMzAiLCJkaXNwbGF5IjoiIn0sInBvcnRyYWl0X21heF93aWR0aCI6MTAxOCwicG9ydHJhaXRfbWluX3dpZHRoIjo3Njh9" custom_title="Stay Connected" block_template_id="td_block_template_8" f_header_font_family="712" f_header_font_transform="uppercase" f_header_font_weight="500" f_header_font_size="17" border_color="#dd3333"]
- Advertisement -spot_img

Latest Articles