6.QML动画——状态与过渡

用户界面的各个部分可以用状态（state）来描述。状态定义了一组属性更改，并且可以由特定条件触发。这些状态可以附加过渡（transition），过渡定义发生状态更改时要运行的动画或动作。

 

一、状态（state、states和State）

state属性用于保存当前item的状态。states属性被指定为State对象的数组。任何State属性都要放在states数组中。

State元素定义了当前item的一系列状态。State的name属性表示状态的名称。name属性默认是一个空字符串。 可以通过将此name设置为空字符串来将item恢复为默认状态。除了name外，State元素还包含了一系列的PropertyChanges元素，PropertyChanges和State绑定，内部定义了在对应状态下的作用目标（target）和相应的属性值。 这样，可以在状态变化时，更改对应目标的属性值。

 

示例

import QtQuick 2.9

Item {
    id: root
    width: 640
    height: 480
    state: "stop"

    Rectangle {
        id:light1
        x:30
        y:30
        width: light1.x+parent.width/3
        height: light1.width
        color: "yellow"
        border.color: "black"
        radius: light1.width/2
    }

    Rectangle {
        id:light2
        x:light1.width+2*light1.x
        y:light1.y
        width: light1.width
        height: light1.height
        color: "yellow"
        border.color: "black"
        radius: light1.width/2
    }


    states: [
        State {
            name: "stop"; when:mouseare.pressed
            PropertyChanges {
                target: light1
                color:"black"
            }
            PropertyChanges {
                target: light2
                color:"red"
            }
        },
        State {
            name: "go"
            PropertyChanges {
                target: light1
                color:"green"
            }
            PropertyChanges {
                target: light2
                color:"black"
            }
        }
    ]

    MouseArea {
        id:mousearea
        anchors.fill: root
        onClicked: {
            if (root.state=="go") {
                root.state="stop"
            }
            else {
                root.state="go"
            }
        }
    }
}

 

上述代码使用rectangle画圆（只需要将rectangle的width和height设为相同的值，然后radius属性设为height或者width的一半即可）。在states中定义了stop和go两种状态，然后状态变换时，light1和light2对应进行变化。此外，states中的State的name属性还可以和when连用，格式是name:"state val";when condition

 

二、过渡（transitions和Transition）

状态更改时，过渡此时可以运行状态变化是的动画或者动作。可以使用from和to属性定义从某个特定状态切换到其他状态时的过渡。from和to后面还可以接通配符*，表示任何状态。

transitions的作用和states是等同的，Transition和State是等同的

 

示例

将下面代码添加到上述代码的最后面

transitions: [
        Transition {
            from: "go"
            to: "stop"

            ColorAnimation {
                target:light1
                property:"color"
                duration: 1000
            }
            ColorAnimation {
                target:light2
                property:"color"
                duration: 1000
            }
        },

        Transition {
            from: "stop"
            to: "go"

            ColorAnimation {
                target:light1
                property:"color"
                duration: 1000
            }
            ColorAnimation {
                target:light2
                property:"color"
                duration: 1000
            }
        }
    ]

上述两个Transition只是from和to不同，而且状态较少，可以使用通配符指定任何过渡状态

transitions: [
        Transition {
            from: "*"
            to: "*"

            ColorAnimation {
                target:light1
                property:"color"
                duration: 1000
            }
            ColorAnimation {
                target:light2
                property:"color"
                duration: 1000
            }
        }
    ]

效果完全

 

参考

《qml book》

 

欢迎大家评论交流，作者水平有限，如有错误，欢迎指出