用例 - QML 中的动画

如何在 QML 应用程序中包含动画的示例

Qt Quick 提供了动画属性的能力。动画属性允许属性值通过中间值移动，而不是立即改变到目标值。要动画一个项目的位置，可以动画控制项目位置的性质，例如 x 和 y，使项目位置在每一帧都变化，直到达到目标位置。

流畅的用户界面

QML 设计用于简化流畅用户界面的创建。这些是用户界面，其中 UI 组件不是突然出现、消失或跳跃，而是通过动画来动画。Qt Quick 提供了两种简单的方式来使 UI 元素通过动画而不是立即出现在新位置。

状态和转换

Qt Quick 允许您在 State 对象中声明各种 UI 状态。这些状态由基本状态中的属性更改组成，并且是一种组织 UI 逻辑的有用方法。转换是与项目关联的对象，用于定义由于状态更改而更改属性时的动画方式。

项目可以声明具有 Item::states 和 Item::transitions 属性的状态和转换。状态在项目的 states 列表属性中声明，通常是组件的根项目。在同一个项目上定义的转换用于动画状态的更改。以下是一个示例。

Item {
    id: container
    width: 320
    height: 120

    Rectangle {
        id: rect
        color: "red"
        width: 120
        height: 120

        TapHandler {
            onTapped: container.state === '' ? container.state = 'other' : container.state = ''
        }
    }
    states: [
        // This adds a second state to the container where the rectangle is farther to the right

        State { name: "other"

            PropertyChanges {
                target: rect
                x: 200
            }
        }
    ]
    transitions: [
        // This adds a transition that defaults to applying to all state changes

        Transition {

            // This applies a default NumberAnimation to any changes a state change makes to x or y properties
            NumberAnimation { properties: "x,y" }
        }
    ]
}

动画属性更改.

可以使用行为指定属性在更改时使用的动画。这然后应用于所有更改，无论它们的来源是什么。以下示例使用行为动画了一个按钮在屏幕上移动。

Item {
    width: 320
    height: 120

    Rectangle {
        color: "green"
        width: 120
        height: 120

        // This is the behavior, and it applies a NumberAnimation to any attempt to set the x property
        Behavior on x {

            NumberAnimation {
                //This specifies how long the animation takes
                duration: 600
                //This selects an easing curve to interpolate with, the default is Easing.Linear
                easing.type: Easing.OutBounce
            }
        }

        TapHandler {
            onTapped: parent.x == 0 ? parent.x = 200 : parent.x = 0
        }
    }
}

其他动画

并非所有的动画都必须绑定到特定的属性或状态。您还可以更通用地创建动画，并在动画中指定目标项目和属性。以下是一些不同方法实现此功能的示例。

Item {
    width: 320
    height: 120

    Rectangle {
        color: "blue"
        width: 120
        height: 120

        // By setting this SequentialAnimation on x, it and animations within it will automatically animate
        // the x property of this element
        SequentialAnimation on x {
            id: xAnim
            // Animations on properties start running by default
            running: false
            loops: Animation.Infinite // The animation is set to loop indefinitely
            NumberAnimation { from: 0; to: 200; duration: 500; easing.type: Easing.InOutQuad }
            NumberAnimation { from: 200; to: 0; duration: 500; easing.type: Easing.InOutQuad }
            PauseAnimation { duration: 250 } // This puts a bit of time between the loop
        }

        TapHandler {
            // The animation starts running when you click within the rectangle
            onTapped: xAnim.running = true
        }
    }
}
Item {
    width: 320
    height: 120

    Rectangle {
        id: rectangle
        color: "yellow"
        width: 120
        height: 120

        TapHandler {
            // The animation starts running when you click within the rectangle
            onTapped: anim.running = true;
        }
    }

    // This animation specifically targets the Rectangle's properties to animate
    SequentialAnimation {
        id: anim
        // Animations on their own are not running by default
        // The default number of loops is one, restart the animation to see it again

        NumberAnimation { target: rectangle; property: "x"; from: 0; to: 200; duration: 500 }

        NumberAnimation { target: rectangle; property: "x"; from: 200; to: 0; duration: 500 }
    }
}

有关动画的更多信息，可以在 Qt Quick 的重要概念页面 - 状态、转换和动画中找到。