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.0Item {    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.0Item {    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 { /* ... */ }    }}