Smooth animation of second hand-CodePudding

I am building a simple animated clock with QML and it works, but I want to have a "sweep second" in which the second hand rotates continuously and smoothly rather than abruptly transitioning from second to second. Without the Behavior line in the code below, I get a stepped-second but otherwise correct behavior. With the Behavior line, it works perfectly until the seconds go from 59 back to 0, and then it goes counter clockwise which is not all the behavior I want.

I read that using SmoothedAnimation would help, but when I tried substituting SmoothedAnimation for NumberAnimation it does a stepped-second until the 59 to 0 transition and then goes counter clockwise.

How do I alter this to have it only rotate clockwise but do so smoothly?

import QtQuick 2.0

Item {
    width: 320; height: 320
    Item {
        property var time: new Date()
        id: wallClock
        Timer {
            interval: 1000
            running: true
            repeat: true
            onTriggered: wallClock.time = new Date()
        }
    }

    Rectangle {
        id: rect1
        x: parent.width/2
        y: parent.height/2 - 100
        width: 10; height: 70
        color: "red"
        transform: Rotation {
            origin.x: rect1.width/2
            origin.y: rect1.height
            angle: wallClock.time.getSeconds()*6
            Behavior on angle { NumberAnimation { duration: 1000 } }
        }
    }
}

CodePudding user response：

Rather than a NumberAnimation or SmoothedAnimation, I think a RotationAnimation is what you want. The advantage there is that it allows you to force the direction to remain clockwise.

        transform: Rotation {
            origin.x: rect1.width/2
            origin.y: rect1.height
            angle: wallClock.time.getSeconds()*6
            Behavior on angle { RotationAnimation { duration: 1000; direction: RotationAnimation.Clockwise} }
        }