状态与过渡（ States and Transitions）

除了Animation还有一种方法可以做出动画效果，那就是状态+过渡

状态（ States）

在QML中， 使⽤State元素来定义状态， 需要与基础元素对象（ Item） 的states序列属性连接。 状态通过它的状态名来鉴别， 由组成它的⼀系列简单的属性来改变元素。

例子中，点击鼠标，可以切换状态，不同状态控制不同的属性值

//状态与过渡
    Item{
        id: itemState
        anchors.fill: parent

        Image{
            id: imgState1
            source: "qrc:/meng.png"
        }

        MouseArea{
            anchors.fill: parent
            onClicked: {
                //切换状态
                if(itemState.state == "go"){
                    itemState.state = "back"
                }
                else{
                    itemState.state = "go"
                }
            }
        }

        //初始化
        state: "back"

        states: [
            //状态-go
            State {
                name: "go"
                PropertyChanges {target: imgState1; x: 300; }
            },
            //状态-back
            State {
                name: "back"
                PropertyChanges {target: imgState1; x: 0; }
            }
        ]
    }

0_1527650315878_20180530_111751.gif

过渡（ Transitions）

只有状态的切换，画面只有闪现效果，要想有动画效果，需要加过渡

例子中，根据迁移的状态不同，添加了不同的过渡时间

transitions: [
            Transition {
                from: "back"; to: "go"
                NumberAnimation { target: imgState1; property: "x"; duration: 2000}
            },
            Transition {
                to: "back"
                NumberAnimation { target: imgState1; property: "x"; duration: 300}
            }
        ]

0_1527650734088_20180530_112505.gif

源代码

Fork me on Gitee