ios – Swift UI Changing view position with drag raises UI bug


Hello I have a graph in swift ui that represents a stock assets price. The user can drag on the graph which presents an overlay line view that moves along with the drag gesture. The purpose of this overlay view is to pinpoint the specific point of the graph that the user is analyzing. When the user drags on the graph everything works just fine and the view appears but the overlay line view is glitchy and doesn’t move smoothly with the drag. The only thing that is animated is showing the overlay and hiding it, and this only is done at the start and end of a gesture so Im not sure why I get this buggy UI. If I drag the line around for a few seconds the following warning appears in the console:

Invalid sample AnimatablePair<AnimatablePair<CGFloat, CGFloat>, AnimatablePair<CGFloat, CGFloat>>(first: SwiftUI.AnimatablePair<CoreGraphics.CGFloat, CoreGraphics.CGFloat>(first: 11.0, second: 0.0), second: SwiftUI.AnimatablePair<CoreGraphics.CGFloat, CoreGraphics.CGFloat>(first: 0.0, second: 0.0)) with time Time(seconds: 0.0) > last time Time(seconds: 0.01664249994792044)

                     GraphView(coin: data).frame(height: 300)
                            .gesture(DragGesture().onChanged({ value in
                                if abs(value.translation.width) > abs(value.translation.height) {
                                    withAnimation { showPlot = true }
                                    barTranslation = value.location.x
                                }
                            }).onEnded({ value in
                                withAnimation { showPlot = false }
                            }).updating($isDrag, body: { value, out, _ in
                                out = true
                            }))
                            .onChange(of: isDrag) { _ in
                                if !isDrag {
                                    showPlot = false
                                }
                            }
                            .overlay(alignment: .bottomLeading) {
                                VStack(spacing: 0){
                                    Text(currentPlot)
                                        .font(.caption.bold())
                                        .foregroundStyle(.gray)
                                        .padding(.bottom, 35)
                                        .position(x: barTranslation)
                                    Rectangle()
                                        .fill(.gray)
                                        .frame(width: 1, height: 300)
                                        .position(x: barTranslation)
                                    Spacer()
                                }
                                .opacity(showPlot ? 1 : 0)
                            }

Latest articles

spot_imgspot_img

Related articles

Leave a reply

Please enter your comment!
Please enter your name here

spot_imgspot_img