State与Transition之Transition

Transition 过渡

使用Transition使State状态变化时，消除状态变化产生的突变。
所有Item都有个transitions属性，它保存着所有的过渡，它是一个列表类型。

Properties

• animations : list< Animation >//动画列表，过渡使用的动画
• enabled : bool //是否使能过渡
• from : string //指定触发过渡的状态名，默认值是”*”,匹配所有状态
• to : string //过渡的目标状态名，默认值是”*”,匹配所有状态（如果from 和to不设置，则所有的状态变化都会触发）
• reversible : bool //状态从to变换到from时，是否触发过渡。
• running : bool //只读，当前过渡是否在运行

PropertyChanges 与PropertyAnimation

Rectangle {
    id: rect
    width: 100; height: 100
    color: "red"

    states: State {
        name: "moved"
        PropertyChanges { target: rect; x: 50 }
    }

    transitions: Transition {
        PropertyAnimation { properties: "x,y"; easing.type: Easing.InOutQuad }
    }
}

ParentChange 与ParentAnimation

import QtQuick 2.0

Item {
    width: 200; height: 100

    Rectangle {
        id: redRect
        width: 100; height: 100
        color: "red"
    }

    Rectangle {
        id: blueRect
        x: redRect.width
        width: 50; height: 50
        color: "blue"

        states: State {
            name: "reparented"
            ParentChange { target: blueRect; parent: redRect; x: 10; y: 10 }
        }

        transitions: Transition {
            ParentAnimation {
                NumberAnimation { properties: "x,y"; duration: 1000 }
            }
        }

        MouseArea { anchors.fill: parent; onClicked: blueRect.state = "reparented" }
    }
}

AnchorChanges 与AnchorAnimation

import QtQuick 2.0

Item {
    id: container
    width: 200; height: 200

    Rectangle {
        id: myRect
        width: 100; height: 100
        color: "red"
    }

    states: State {
        name: "reanchored"
        AnchorChanges { target: myRect; anchors.right: container.right }
    }

    transitions: Transition {
        // smoothly reanchor myRect and move into new position
        AnchorAnimation { duration: 1000 }
    }

    Component.onCompleted: container.state = "reanchored"
}

StateChangeScript 与ScriptAction

State {
    name: "state1"
    StateChangeScript {
        name: "myScript"
        script: doStateStuff();//此状态被应用时， doStateStuff()会被执行
    }
    // ...
}
// ...
Transition {
    to: "state1"
    SequentialAnimation {
        NumberAnimation { /* ... */ }
        ScriptAction { scriptName: "myScript" }
        NumberAnimation { /* ... */ }
    }
}