Important: Please read the Qt Code of Conduct -

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.


    import QtQuick 2.0
    Rectangle {
    visible: true
    width: 800
    height: 800
    color: "#00000000"
    // My Needle
        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 {
                    duration: 1500
                    easing.type: Easing.OutQuad
    // Sample Timer to update needle angle
        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