import QtQuick 2.0
import QtQuick.Controls 2.2
Rectangle {
id:page
width: 320
height: 480
color: "lightgray"
Text{
id:helloText
text:"hello world"
y:30
anchors.horizontalCenter: page.horizontalCenter
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 代表的是从某个状态到另外一个状态的过程中
from: ""
to: "down"
//reversible 代表的是反过程
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的信号事件,如果cell发送了信号就设置Text的值
*/
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 }
}
Button {
id: button
x: 66
y: 140
text: qsTr("Button")
focusPolicy: Qt.NoFocus
}
}
qml状态机动画的使用
最新推荐文章于 2024-07-11 18:27:54 发布