QML笔记整理——QtQuick状态、过渡和动画

1、States（状态）
状态用于管理有id的元素，它是由多个state元素构成，每个元素都可以定义多个不同的状态（使用states属性定义状态列表；当前状态由state属性指定）当元素进入某个状态时，状态所对应的属性将被设置。我们可以：1）修改anchors对齐方式；2）修改item的parent；3）执行一段javascript代码
状态的例子：

Rectangle {

Rectangle {

id: stop_light

...

}

Rectangle {

id: go_light

...

}

states: [

State {

name: "stop"

PropertyChanges {

target: stop_light; color: "red"

}

PropertyChanges {

target: go_light; color: "black"

}

},

State {

name: "go"

PropertyChanges {

target: stop_light; color: "black"

}

PropertyChanges {

target: go_light; color: "green"

}

}

]//定义两个状态分别为go和stop，

//使用PropertyChanges为每个状态设置目标和起对应的属性值

state: "stop"//define initial state

MouseArea {

anchors.fill: parent

onClicked: parent.state == "stop" ?

parent.state = "go" :

parent.state = "stop"

}//使用MouseArea的事件响应来完成不同状态的切换

}

2、修改属性
states通过PropertyChanges来修饰属性，指定目标元素的id给target属性，定义要修改的目标元素的属性值（一个PropertyChanges元素可以修改多个属性），当进入相应状态时，对应的属性设置就会生效

3、默认属性
每个元素都可以指定一个默认属性，设置属性时，属性名字标签可以被省略。state元素的默认属性是changes

4、状态条件
1）让state决定何时被激活：使用条件判断来决定是否激活一个state
2）使用when属性：用表达式来判断条件，并返回true或false
3）state list中只能有一个state是被激活的：确保一个时间只有一个条件为真

Rectangle {

TextInput {

id: text_field

text: "Enter text..."

}

Image {

id: clear_button

source: "images/clear.png"

    MouseArea {

    anchors.fill: parent

onClicked: text_field.text = ""

}

}

states:[

State {

name: "with text"

when: text_field.text != ""

PropertyChanges {

target: clear_button

opacity: 1.0

}

},

State {

name: "without text"

when: text_field.text == ""

PropertyChanges {

target: clear_button

opacity: 0.25

}

PropertyChanges {

target: text_field

focus: true

}

}

]

}

5、过渡
1）Transition元素用于为状态之间的切换提供动画支持（A. 过渡只能被状态切换激活；B. 过渡中的动画可以以串行或并行的方式执行）
2）通过设置to和from属性，我们可以指定与特定状态绑定的动画
3）过渡可以被设置为reversible（默认为false）。当满足条件时，自动切换到以前的状态
示例：（修改上面的go和stop程序）

transitions: [

Transition {

from: "stop"; to: "go"

PropertyChanges {

target: stop_light

properties: "color"

duration: 1000

}

},

Transition {

from: "go"; to: "stop"

PropertyAnimation {

target: go_light

properties: "color"

duration: 1000

}

}

]

通过设置transitions属性来定义多个Transition，设置“stop”和“go”之间的状态切换

6、通用过渡

transitions: [

Transition {

from: "*"; to: "*"

PropertyChanges {

target: stop_light

properties: "color"

duration: 1000

}

PropertyChanges {

target: go_light

properties: "color"

duration: 1000

}

}

]

使用“*”匹配所有状态（默认值为“*”）；只要有状态改变，过渡就会被执行；两个目标的过渡是同时进行的

7、可逆过渡

transitions: [

Transition {

from: "with text"; to: "without text"

reversible: true

PropertyChanges {

target: clear_button

properties: "opacity"

duration: 1000

}

}

]

状态若使用when属性，就可以使用可逆过渡；当两个过渡应用到相同的属性时，可以采用；从状态“with text”到“without text”的时候，过渡生效，当满足条件时，再转换回来，而无须定义两个过渡

8、动画
1）可以对元素的属性变化加入动画：Types： real，int，color，rect，point，size
2）有三种使用动画的方法：基本的属性动画、过渡、属性行为
3）动画可以分组、串行或并行执行：SequantialAnimation、ParallelAnimation、PauseAnimation
4）预定义的easing curve：OutQuad、InElastic、OutBounce等等（欲了解更多详细信息，请查看PropertyAnimation文档）
5）使用属性动画，使用PorpertyAnimation，NumberAnimation，or ColorAnimation他们有公共的基类Animation
6）对于属性行为，使用Behavior
7）对于过渡，使用Transition
示例一：

Rectangle {//Example of drop-and-bounce effect on an image

id: rect

width: 120; height: 200

Image {

id: img

source: "images/home01.jpg"

x: 60-img.width/2; y: 0

SequentialAnimation on y {

running: true

loops: Animation.Infinite

NumberAnimation {

to: 200-img.height

easing.type: "OutBounce"

duration: 2000

}

PauseAnimation {

duration: 1000

}

NumberAnimation {

to: 0

easing.type: "OutQuad"

duration: 1000

}

}

}

}

示例二：

Rectangle {//Animation as a separate element; refered to by its id

id: rect

width: 120; height: 200

PropertyAnimation {

id: animation

target: image

property: "scale"

from: 1; to: .5

}

Image {

id: image

source: "images/home01.jpg"

    MouseArea {

    anchors.fill: parent

onClicked: animation.start()

}

}

}

9、属性行为
设置一个默认的动画在属性发生改变的时候执行（无论什么造成的属性改变，都会执行）
示例：西面这段动画在redRect的x发生改变的时候执行

Rectangle {

...

Rectangle {

id: redRect

color: "red"

width: 100; height: 100

x:...

Behavior on x {

NumberAnimation {

duration: 300; easing.type: "InOutQuad"

}

}

}

}

10、使用状态和过渡
1）避免定义过于复杂的状态机
    A）不要使用一个状态机来管理所有的UI部分；
    B）针对不同的控件使用独立的状态机，然后通过状态属性把控件的状态联系起来
2）使用script代码设置状态，简单，但是很难管理，且没有可逆过渡
3）使用状态条件来控制状态更符合声明式的风格，但状态条件可能会很复杂

11、总结
1）状态：使用状态来管理其他元素的属性
    A）定义状态是用元素的属性，每个状态都必须有独立的名字
    B）给元素设置一个id是很有用的，使用PropertyChanges来修改元素的属性
    C）元素的state属性，保存了当前的状态。可以用javascript来修改它的值，也可以使用when属性来设置状态成立条件
2）过渡：过渡用来描述状态之间的切换过程
    A）使用transitions属性来定义元素的过渡
    B）过渡需要描述始末两个状态，使用from和to这两个属性，使用通配符“*”来表示所有状态
    C）过渡是可逆的，相当于把from和to属性的值交换

12、计时器
计时器使用Timer元素表示的，只提供了一个简单的信号：onTriggered，可以单词或重复使用计时器
示例如下：

Timer {

interval: 500

running: true

repeat: true

onTriggered: time.text = Date().toString()

}

Text {

id: time

}