QML 学习摘录 05 - 状态与过渡（states and transitions）

状态与过渡（states and transitions）

通常我们将⽤户界⾯描述为⼀种状态。⼀个状态定义了⼀组属性的改变，并且会在⼀定的条件下被触发。另外在这些状态转化的过程中可以有⼀个过渡，定义了这些属性的动画或者⼀些附加的动作。

1.状态 States

在QML中，使⽤State元素来定义状态，需要与基础元素对象（Item）的states序列属性连接。状态通过它的状态名来鉴别，由组成它的⼀系列简单的属性来改变元素。默认的状态在初始化元素属性时定义，并命名为“”（⼀个空的字符串）。

示例代码：交通信号灯有 go和stop两个状态

Item{
id：root
states: [
       State {
           name: "stop"
           PropertyChanges {target: light1;color:"red"}
           PropertyChanges {target: light2;color:"black"}
       },
       State {
           name: "go"
           PropertyChanges {target: light1;color:"black"}
           PropertyChanges {target: light2;color:"green"}
       }
   ]
}

状态的改变由由分配⼀个元素新的状态属性名来完成，如以下代码：鼠标点击时，切换状态属性名称

 MouseArea{
       anchors.fill: parent
       onClicked: parent.state = (parent.state=="stop" ? "go":"stop")
   }

2. 过渡 transitions

⼀系列的过渡能够被加⼊任何元素，⼀个过渡由状态的改变触发执⾏。你可以使⽤属性的from:和to:来定义状态改变的指定过渡。这两个属性就像⼀个过滤器，当过滤器为true时，过渡⽣效。你也可以使⽤“ ”来表⽰任何状态。例如from:”* “; to:” * ”表⽰从任⼀状态到另⼀个任⼀状态的默认值，这意味着过渡⽤于每个状态的切换。
在本节的例子中，红绿灯状态在go和stop之间切换时，利用过渡和缓冲曲线使切换过程更生动, 切换时过渡效果如下：

完成代码如下:

import QtQuick 2.3
Rectangle {
    id: root
    width: 200;height:300
    border.color: "gray"
    property int duration: 3000
   Rectangle{
       id:light1
       x:20;y:15
       width: 120;height: 120
       radius: width/2
       color: "black"
       border.color: "gray"
   }
   Rectangle{
       id:light2
       x:20;y:150
       width: 120;height: 120
       radius: width/2
       border.color: "gray"
       color: "black"
   }
    /*状态*/
   state: "stop"
   states: [
       State {
           name: "stop"
           PropertyChanges {target: light1;color:"red"}
           PropertyChanges {target: light2;color:"black"}
       },
       State {
           name: "go"
           PropertyChanges {target: light1;color:"black"}
           PropertyChanges {target: light2;color:"green"}
       }
   ]
   /*过渡*/
   transitions: [
       Transition {
           from: "stop";to: "go"
           ColorAnimation { target: light1;properties: "color";duration: 1000;easing.type: Easing.OutCirc }
           ColorAnimation { target: light2;properties: "color";duration: 1000;easing.type: Easing.OutCirc}
       },
       Transition {
           from: "go";to: "stop"
           ColorAnimation { target: light1;properties: "color";duration: 1000;easing.type: Easing.InBounce}
           ColorAnimation { target: light2;properties: "color";duration: 1000;easing.type: Easing.InBounce}
       }
   ]
   MouseArea{
       anchors.fill: parent
       onClicked: parent.state = (parent.state=="stop" ? "go":"stop")
   }
}