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
currentIndex
from 0 to 3599, ie. the PathView hasmodel: 3599
. The problem is that the "default animation" of pathview usinghighlightMoveDuration
doesnt give very smooth animation, the movement is a bit jumpy between each update ofcurrentIndex
.Using
SmoothedAnimation
on the input-value andhighlightMoveDuration
set 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
SmoothedAnimation
introduces 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.Sync
value 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
highlightMoveDuration
where 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; } } }