用例 - QML中的动画¶

流畅的用户界面¶

QML 旨在促进流畅用户界面的创建。这些用户界面中的组件会以动画形式呈现，而不是突然出现、消失或跳跃。Qt Quick 提供了两种简单的方法，使 UI 组件能够通过动画移动，而不是立即出现在新位置。

状态和转换¶

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

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