时间戳

首页 > 解决方案 > 秒针的流畅动画

animation - 秒针的流畅动画

问题描述

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

我读到 usingSmoothedAnimation会有所帮助，但是当我尝试替换它时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 } }
        }
    }
}

标签： animationqml

解决方案

而不是 a NumberAnimationor SmoothedAnimation，我认为 aRotationAnimation是你想要的。这样做的好处是它允许您强制方向保持顺时针方向。

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

推荐阅读