SwiftUI拖拽滑块组件中Capsule与Circle同步卡顿/抖动问题求助

我最近在做一个SwiftUI的距离选择滑块组件，遇到了一个头疼的同步问题，想请教大家怎么解决：

具体情况是这样的：

• 我希望拖动Circle滑块时，前面的Capsule长度能跟着同步变化，让视觉效果更连贯；
• 一开始我给Capsule的宽度设置为20 + max(0, capsuleOffset)，结果滑块拖动很顺滑，但Capsule长度的变化总是比Circle的偏移慢一倍，看起来特别不协调；
• 后来我改成了20 + max(0, capsuleOffset * 2)，这下Capsule和Circle终于同步了，但整个组件开始出现来回抖动的情况，拖拽体验变得很差。

我试过把DragGesture里的逻辑包在withAnimation()里（代码里注释掉的部分），但抖动的问题还是没解决。下面是我的完整代码，麻烦大家帮我看看哪里出问题了：

struct DistanceTab: View {
    @State var miles: Int = 0
    @State var circleOffset: CGFloat = 0
    @State var capsuleOffset: CGFloat = 0
    
    var body: some View {
        VStack {
            HStack{
                Text("Distance")
                    .foregroundStyle(Color.blackbackground)
                Spacer()
                Text("\(miles) miles")
                    .foregroundStyle(Color.blackbackground)
            }
            .padding()
            
            ZStack{
                RoundedRectangle(cornerRadius: 25)
                    .overlay (
                        HStack {
                            ZStack {
                                Capsule()
                                    .frame(width: 20 + max(0, capsuleOffset * 2), height: 20)
                                    .foregroundStyle(Color.white)
                                
                                Circle()
                                    .offset(x: circleOffset)
                                    .frame(width: 12, height: 12)
                                    .foregroundStyle(Color.blackbackground)
                                    .gesture(
                                        DragGesture()
                                            .onChanged({ value in
                                                // withAnimation() {
                                                    circleOffset = value.translation.width
                                                    capsuleOffset = value.translation.width
                                                    miles = Int(circleOffset) / 11
                                                    print(circleOffset)
                                                // }
                                            })
                                    )
                            }
                            Spacer()
                        }
                            .padding(.horizontal, 5)
                    )
                    .foregroundStyle(Color.main)
                    .frame(maxWidth: .infinity, maxHeight: 28)
                    .padding(.horizontal, 15)
            }
            .padding(.bottom, 10)
        }
        .frame(maxWidth: .infinity, minHeight: 100)
        .background(
            RoundedRectangle(cornerRadius: 20)
                .foregroundStyle(Color.mainBackground)
        )
        .padding(.horizontal, 15)
    }
}

有没有办法让Capsule和Circle既同步变化，又能保持拖拽的顺滑不抖动呢？

内容来源于stack exchange