Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

PathView Animation



  • Hello, I'm working on a "heading display" which uses PathView to scroll through values from 0 to 359.9.
    heading.png
    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 has model: 3599. The problem is that the "default animation" of pathview using highlightMoveDuration doesnt give very smooth animation, the movement is a bit jumpy between each update of currentIndex.

    Using SmoothedAnimation on the input-value and highlightMoveDuration 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 the SmoothedAnimation.Sync value for reversingMode, 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; }
        	}
        }

Log in to reply