QtQuick Gauge Needle rotation animation is not smooth



  • I was trying to create a simple gauge using the QtQuick. The problem I am facing is that the needle rotation is not smooth. When the needle angle is changed for a higher value the needle not moving smoothly, there are some jerk in the motion and also feel like multiple needle moving. I tried to use most of the Animations Types and Easing types available but the result was negative.

    main.qml:-

    import QtQuick 2.0
    
    Rectangle {
    visible: true
    width: 800
    height: 800
    color: "#00000000"
    
    // My Needle
    Rectangle{
        id: id_needle
        x: 350
        y: 350
        width: 300
        height: 5
        color: "red"
        antialiasing: true
        smooth: true
        transform: Rotation {
            id: rotation
            origin.x: 3
            origin.y: 3
            angle: 0
    
            Behavior on angle {
    
                NumberAnimation{
                    duration: 1500
                    easing.type: Easing.OutQuad
                }
            }
        }
    }
    
    // Sample Timer to update needle angle
    Timer{
        id: tim
        repeat: true
        running: true
        interval: 2000
        onTriggered: {
    
            var data = Math.floor(Math.random() * 360) + 0
            rotation.angle = data
    
         }
      }
    }
    

    VIdeo and Log


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.