旋转动画 QML 类型

动画化旋转值的变化。 更多...

• 所有成员列表，包括继承成员

属性

• direction : 枚举型
• from : 实数
• to : 实数

详细描述

RotationAnimation 是一个特殊的 PropertyAnimation，它可以在动画过程中控制旋转方向。

默认情况下，它按照数值变化的顺序旋转；从 0 到 240 的旋转将顺时针旋转 240 度，而从 240 到 0 的旋转将逆时针旋转 240 度。可以通过设置 direction 属性来指定旋转的方向。

在以下示例中，我们使用 RotationAnimation 通过最短路径在状态之间进行动画处理

import QtQuick

Item {
    width: 300; height: 300

    Rectangle {
        id: rect
        width: 150; height: 100; anchors.centerIn: parent
        color: "red"
        antialiasing: true

        states: State {
            name: "rotated"
            PropertyChanges { target: rect; rotation: 180 }
        }

        transitions: Transition {
            RotationAnimation { duration: 1000; direction: RotationAnimation.Counterclockwise }
        }
    }

    MouseArea { anchors.fill: parent; onClicked: rect.state = "rotated" }
}

注意 RotationAnimation 不需要设置 target 值。作为便利，当在过渡中使用时，RotationAnimation 将旋转所有名为 "rotation" 或 "angle" 的属性。您可以通过通过 properties 或 property 提供自己的属性来覆盖此行为。

此外，请注意 矩形 将围绕其默认的 transformOrigin（即 Item.Center）进行旋转。要使用不同的转换原点，请将原点设置在 PropertyChanges 对象中，并在动画开始时使用 PropertyAction 应用更改。有关更多详细信息，请参阅 PropertyAction 文档。

与其他动画类型一样，旋转动画可以通过多种方式应用，包括过渡、行为和属性值源。有关创建动画的多种方法的说明，请参阅 Qt Quick 中的动画和过渡 文档。

另请参阅Qt Quick 中的动画和过渡 以及 Qt Quick 示例 - 动画。

属性文档

Item {
    states: [
        // ...
    ]

    transitions: Transition {
        RotationAnimation { properties: "angle"; from: 100; duration: 2000 }
    }
}