摘要：
y:30个锚点。horizontalCenter:page.horizontalCentrefont.pointSize:24；font.bold：trueMouseAra｛id:mouseAre；锚点。fill:parent｝状态：状态｛name:“down”；当：mouseRea.pressed==truePropertyChanges｛target:helloText；y:160；旋转：180；颜色：“red”｝｝转换：转换｛从：“”；到：“down“；可逆：trueParallelAnimation｛NumberAnimation｝属性：“y，旋转”；持续时间：500；缓解。类型：easing.InOutQua d｝ColorAnimation｛持续时间：500｝｝}｝网格｛id:colorPickerx:4；锚点。底部：页面底部；锚点底部边距：4行：2；列：3；间距：3单元格｛cellColor:“红色”；单击：helloText.coolor=cellColor｝单元格｛细胞颜色：“绿色”；单击的：hello文本.coolor=cellColour｝单元格{cellColor:“蓝色”；点击的：hello文本.cool=cellColor｝单元｛Cell颜色：“黄色”；单击蓝色“ ; 点击：你好短信。color=cellColor｝单元格｛cellColor:“black”；onClicked:hello Text.color=Cell color｝｝｝｝。qml，还有一个单元格qml也是必需的，这与教程中的完全相同。让我们看看添加到教程代码中的内容。此状态的名称为“down”，然后“when”指定何时触发此状态。过渡用于增加动画效果。您还可以看到过渡是复数的，这意味着您可以添加多个动画进程。“from”和“to”的参数名来自State中的“name”属性。NumberAnimation用于qreal类型的属性更改，ColorAnimation则用于颜色更改。有关更多动画，请在QML文档中找到“动画和过渡”。好了，这三个教程到此结束。有关更多资源，请访问DeclarativeUIUsingQML。
经过前面两个教程，文字也能显示，也能处理鼠标事件了，来点动画吧。
这个教程实现了当鼠标按住的时候，Hello,World从顶部到底部的一个旋转过程，并带有颜色渐变的效果。
完整的源代码main.qml
import Qt 4.7
Rectangle {
id: page
500; height: 200
color: "lightgray"
Text {
id: helloText
text: "Hello World!"
y: 30
anchors.horizontalCenter: page.horizontalCenter
font.pointSize: 24; font.bold: true
MouseArea { id: mouseArea; anchors.fill: parent }
states: State {
name: "down"; when: mouseArea.pressed ==true
PropertyChanges { target: helloText; y: 160; rotation: 180; color: "red"}
}
transitions: Transition {
from: ""; to: "down"; reversible: true
ParallelAnimation {
NumberAnimation { properties: "y,rotation"; duration: 500; easing.type: Easing.InOutQuad }
ColorAnimation { duration: 500}
}
}
}
Grid {
id: colorPicker
x: 4; anchors.bottom: page.bottom; anchors.bottomMargin: 4
rows: 2; columns: 3; spacing: 3
Cell { cellColor: "red"; onClicked: helloText.color =cellColor }
Cell { cellColor: "green"; onClicked: helloText.color =cellColor }
Cell { cellColor: "blue"; onClicked: helloText.color =cellColor }
Cell { cellColor: "yellow"; onClicked: helloText.color =cellColor }
Cell { cellColor: "steelblue"; onClicked: helloText.color =cellColor }
Cell { cellColor: "black"; onClicked: helloText.color =cellColor }
}
}
Text{
...
states: State {
name: "down"; when: mouseArea.pressed ==true
PropertyChanges { target: helloText; y: 160; rotation: 180; color: "red"}
}
transitions: Transition {
from: ""; to: "down"; reversible: true
ParallelAnimation {
NumberAnimation { properties: "y,rotation"; duration: 500; easing.type: Easing.InOutQuad }
ColorAnimation { duration: 500}
}
}
...
}
transitions 是用于增加动画效果的（如果把transitions这一段代码删去，Hello,World的文字也会发生变化,但是看不到中间动画渐变效果)。同样可 以看到transitions是复数形式，意味着可以添加多个动画过程。“from”和”to”指明了当前的动画作用于哪两个状态变化之间。 “from”和”to”的参数名来自于State中的”name”属性。
ParalleAnimation则指定了有多个 有多个动画并行发生。NumberAnimation用于qreal类型的属性变化,ColorAnimation则用于颜色变化。更多 Animation请在QML文档中查找”Animation and Transitions”。
好了，三篇教程到此结 束。更多资源请访问Declarative UI Using QML。