用例 - QML 中的动画

Qt Quick 提供了动画属性的能力。动画属性值可以在中间值之间移动，而不是直接改变到目标值。要动画化项目的位置，可以动画化控制项目位置的属性，比如 x 和 y，以便在朝向目标位置的过程中，项目的位置在每个帧中变化。

流畅的用户界面

QML 旨在促进流畅用户界面的创建。这些用户界面中，UI 组件是会动的，而不是突然出现、消失或跳转。Qt Quick 提供两种简单的动画方式，使 UI 组件移动而不是瞬间出现在新位置。

状态和过渡

Qt Quick 允许你在状态对象中声明各种 UI 状态。这些状态由基本状态的变化组成，可以是有用的 UI 逻辑组织方式。过渡是与项目关联的对象，当项目因状态变化而属性改变时，用于定义属性如何动画。

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

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 重要概念 - 状态、过渡和动画页面上找到。