QML官方系列教程——Use Case - Animations In QML

附网址：http://qt-project.org/doc/qt-5/qtquick-usecase-animations.html

Use Case - Animations In QML —— 用例 - QML中的动画

Qt Quick为应用程序提供了动画能力。动画属性使得属性值可以不用立刻变换到目标值，而是通过一系列中间值发生改变。要使一个项目的位置产生动画，你可以动态改变控制这个项目位置的属性的值，比如x和y，这样该项目将会在它到达目标地点的每一帧发生改变。

Fluid UIs —— 流畅的UI界面

QML旨在更便捷的流畅UI的创建，比如UI组件的出现、消失或是跳跃等等。Qt Quick提供了两种简单的方式来通过动画改变UI组件的位置。

States and Transitions —— 状态和转换

Qt Quick允许你在State对象中声明多个UI状态。这些状态由基于基态的一组改变组成，并且可以作为组织你的UI逻辑的一个很有用的方式。我们可以将状态的变换放置在需要改变的Item中，并在其中定义当状态改变时属性动画的具体实现。

一个item的状态和转换可以被声明在Item::states和Item::transitions属性中。item的多个状态在states属性中以列表形式一一声明，通常来讲这个item即为根项目。我们同样在这个item内定义Transitions，它将被用来为状态的改变添加动画。

这里是一个例子：

Item {
    id: container
    width: 320
    height: 120

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

        MouseArea {
            anchors.fill: parent
            onClicked: container.state == 'other' ? container.state = '' : container.state = 'other'
        }
    }
    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" }
        }
    ]
}

·

Animating Property Changes —— 为属性改变添加动画

当一个属性值发生改变时，Behaviors可以被用来为其指定一个动画。这适用于所有改变，无论其来源（意思是不管你是长、宽、高、颜色...）。下面的例子演示了一个使用behaviors的动态按钮如何在屏幕在进行移动：

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

        MouseArea {
            anchors.fill: parent
            onClicked: parent.x == 0 ? parent.x = 200 : parent.x = 0
        }
    }
}

·

Other Animations —— 其它动画

并非所有的动画都系于明确的属性或是状态。你也可以创建更为通用的animations，然后声明它的目标项目和以及需要产生这种动画的属性。这里使用两种不同的方式演示了这一点：

// 这段代码类似behaviors，将动画作用于父对象的某个属性上
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
        }

        MouseArea {
            anchors.fill: parent
            // The animation starts running when you click within the rectangle
            onClicked: xAnim.running = true
        }
    }
}

// 与上一段代码分开，SequentialAnimation与Rectangle属于同级，通过target和property指定动画对象
Item {
    width: 320
    height: 120

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

        MouseArea {
            anchors.fill: parent
            // The animation starts running when you click within the rectange
            onClicked: 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 }
    }
}

·

 

更多关于动画的信息可以前往Important Concepts in Qt Quick - States, Transitions and Animations页面。