PathView Animation
-
Hello, I'm working on a "heading display" which uses PathView to scroll through values from 0 to 359.9.

The entire number-range including ticks is moving except the orange line which is static.What I'm struggling with is the animation / "smoothness" of the pathview. I'm moving the pathview using
currentIndexfrom 0 to 3599, ie. the PathView hasmodel: 3599. The problem is that the "default animation" of pathview usinghighlightMoveDurationdoesnt give very smooth animation, the movement is a bit jumpy between each update ofcurrentIndex.Using
SmoothedAnimationon the input-value andhighlightMoveDurationset to 0 yields somewhat satisfactory movement although it could be smoother since due to the fact that there is no animation between each index now.However using
SmoothedAnimationintroduces another issue ... When the input-value is passing 0 from either direction this will cause a jump in the animation. For instance if the value is going from 359 to 0, this causes the animation to ramp downward to 0, not go straight to 0. I've tried theSmoothedAnimation.Syncvalue forreversingMode, which somewhat works but it stops the movement at the instant of the jump, causing the animation to ramp up again, which is problematic if passing 0 at a higher velocity.Does anyone have a suggestion how to do this properly? Ie. smooth animation between indices as if
highlightMoveDurationwhere used but smoother without jumps, and no issues with animation during the jump from 359.9 to 0.PathView { id: headingPath anchors.fill: parent model: 3599 delegate: headingDelegate pathItemCount: 650 preferredHighlightBegin: 0.5 preferredHighlightEnd: 0.5 clip: true snapMode: PathView.NoSnap interactive: false highlightMoveDuration: 0 path: Path { startX: 20 startY: root.height/2 PathLine { x: root.width*0.5; y: root.height*0.5; } PathLine { x: root.width-20; y: root.height*0.5; } } }