秒针流畅动画

Question

我正在使用 QML 构建一个简单的动画时钟并且它可以工作，但我想要一个“秒针”，其中秒针连续平稳地旋转，而不是突然从一秒过渡到另一秒。如果没有下面代码中的 Behavior 行，我会得到一个步进的第二个但在其他方面是正确的行为。使用 Behavior 行，它可以完美地工作，直到秒数从 59 回到 0，然后它 逆时针 这不是我想要的所有行为。

我读到使用 SmoothedAnimation 会有所帮助，但是当我尝试用 SmoothedAnimation 代替 NumberAnimation 时，它会逐步执行直到从 59 到 0 的过渡然后逆时针.

我如何改变它使其仅顺时针旋转但顺时针旋转？

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 } }
        }
    }
}

Answer 1

而不是 NumberAnimation 或 SmoothedAnimation，我认为 RotationAnimation 是您想要的。这样做的好处是可以让你强行保持顺时针方向。

        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} }
        }

秒针流畅动画

Smooth animation of second hand

animation

qml