一、状态、过渡的使用示例
1.携带过渡效果的状态切换演示
下图通过双击图形触发状态的更新(槽函数),首次双击并未指定状态过渡效果(所以变化突兀),仅在两个图形之间状态的切换指定过渡(因此仅图形之间双击才会触发下图效果)。
2.直接切换State的效果演示
下图左侧按钮按下或右侧复选框勾选时设置新效果,两个按钮代表分别代表两个图形的位置更新
二、状态与过渡的个人理解
1.关于状态(States)
状态是指UI元素在不同的场景或用户操作下的一种特定效果(如鼠标悬浮在按钮上,按钮颜色变化等效果)。
- 设置后仅仅是临时的改变QML元素的属性,当状态置空时相应属性值会恢复至初始状态。
- 状态设置存在先后顺序,当同一时间满足两个状态条件时,只有先定义的State会生效。
2.关于过渡(Transitions)
过渡用于QML元素状态之间平滑切换(动画效果个性化定义)
- 当State中某参数是根据原参数值关联变化(如width:width*2的关系),设置该参数动画时,动画结束时可能会以结束时的参数值做原参值关联变化(会有突兀变化的效果)。
如下图:
三、源码
import QtQuick 2.0
import QtQuick.Controls 2.12
Item {
id: satt
// (状态)按钮
Button {
id: leftRectMoveBtn
text: "左侧矩形移位"
}
// (状态)复选框
CheckBox {
id: rightRectMoveCheckBox
text: "右侧矩形移位"
checked: false
// 锚点布局
anchors.left: leftRectMoveBtn.right
}
// 测试按钮
// Button {
// id: testBtn
// text: "状态置空"
// onClicked: satt.state = "" //console.log(leftRect.width)
// anchors.left: rightRectMoveCheckBox.right
// anchors.leftMargin: 20
// }
// 定义第一个图形
Rectangle {
id: leftRect
x: 100
y: 100
width: 50
height: width
radius: width / 2
color: "skyblue"
// 状态更新操作
MouseArea {
id: leftMouseArea
anchors.fill: parent
onDoubleClicked: satt.state = "leftDoubleClickWithTransition"
}
}
// 定义第二个图形
Rectangle {
id: rightRect
x: 200
y: 100
width: leftRect.width
height: width
radius: width / 2
color: "lightgray"
// 状态更新操作
MouseArea {
id: rightMouseArea
anchors.fill: parent
onDoubleClicked: satt.state = "rightDoubleClickWithTransition"
}
}
states: [
// **********
// Sate通过when指定属性变化使用状态
// **********
State {
name: "leftRectMove"
// 当leftRectMoveBtn按下时触发,释放即恢复
when: leftRectMoveBtn.pressed
// 位置属性值更新
PropertyChanges {
target: leftRect
x: 300
y: 300
}
},
State {
name: "rightRectMove"
// 当rightRectMoveCheckBox勾选时触发,取消勾选即恢复
when: rightRectMoveCheckBox.checkState
// 位置属性值更新
PropertyChanges {
target: rightRect
x: 5
y: 300
}
},
// **********
// Sate通过主动设置使用状态
// **********
State {
name: "leftDoubleClickWithTransition"
// 左侧元素 宽度、高度、颜色变化
PropertyChanges {
target: leftRect
width: 100
height: width
color: "blue"
}
// 右侧元素 宽度、高度、颜色变化
PropertyChanges {
target: rightRect
width: 50
height: width
color: "lightgray"
}
},
State {
name: "rightDoubleClickWithTransition"
// 左侧侧元素 宽度、高度、颜色变化
PropertyChanges {
target: leftRect
width: 50
height: width
color: "lightblue"
}
// 右侧元素 宽度、高度、颜色变化
PropertyChanges {
target: rightRect
width: 100
height: width
color: "gray"
}
}
]
// **********
// Sate切换的过渡
// **********
transitions: [
Transition {
from: "leftDoubleClickWithTransition"
to: "rightDoubleClickWithTransition"
// 左侧图形的动画效果设置
ColorAnimation {
target: leftRect
properties: "color"
duration: 1500
}
PropertyAnimation {
target: leftRect
properties: "width,height"
duration: 1500
}
// 右侧熟悉的动画属性设置
ColorAnimation {
target: rightRect
properties: "color"
duration: 1500
}
PropertyAnimation {
target: rightRect
properties: "width,height"
duration: 1500
}
},
Transition {
from: "rightDoubleClickWithTransition"
to: "leftDoubleClickWithTransition"
// 左侧图形的动画效果设置
ColorAnimation {
target: leftRect
properties: "color"
duration: 1500
}
PropertyAnimation {
target: leftRect
properties: "width,height"
duration: 1500
}
// 左侧图形的动画效果设置
ColorAnimation {
target: rightRect
properties: "color"
duration: 1500
}
PropertyAnimation {
target: rightRect
properties: "width,height"
duration: 1500
}
}
]
}
友情提示——哪里看不懂可私哦,让我们一起互相进步吧
(创作不易,请留下一个免费的赞叭 谢谢 ^o^/)
注:文章为作者编程过程中所遇到的问题和总结,内容仅供参考,若有错误欢迎指出。
注:如有侵权,请联系作者删除