Qml-Transition的使用
Transition的概述
- Transition：定义了当状态发生改变时应用的动画
- 属性animations : list：(Transition)过渡的动画
- 属性enabled : bool：状态发生变化时，是否使能此过渡（Transition）动画；
- 属性from : string：过渡的起始状态(State)名称,默认为"*"(任何状态)
- 属性to : string：过渡的结束状态(State)名称,默认为"*"(任何状态)
- 属性reversible : bool：当触发此变换的条件反转时是否应自动反转转换
- 属性running : bool：只读（read-only）,当前状态是否发生
- 注意：默认情况下，任何状态的修改，都会触发过渡动画。可以通过设置动画的from和to,来限制 只从一个状态到另一个状态的特定应用
- 注意：如果定义了多个过渡动画，会并行运行过渡动画，如果想过渡动画串行运行需要使用SequentialAnimation
- 注意：如果状态绑定的属性和Behavior绑定的属性一致时，过渡动画会覆盖Behavior动画，即过渡动画生效，Behavior动画不生效
- 注意：revesible的生效和PropertyChange 中restoreEntryValues属性有关系，restoreEntryValues 为false,不会生效。在本demo中，如果过渡有多个动画，revesible 生效需要同时满足：多个动画是串行动画（SequentialAnimation）且 from或to 属性要设置至少其中一个
- 注意：如果有多个过渡可供选择，会有个匹配规则，如果指定了from 和 to ,匹配指定的from和to,然后匹配指定了单个的，最后匹配“*”；比如状态有state1,state2,state3; Transition有 Transition{ id:t1;from:“state1”; to:“state2”},Transition{id:t2;to:“state2”},Transition{id:t3;xxx}
a. 当状态从state1~state2 变化，优先选 t1
b.当状态从 state3~state2变化，优先选 t2
c.当状态从 state1 ~state3变化，优先选t3
Transition的实例代码
import QtQuick
//Transition 定义了当状态发生改变时应用的动画。
//在过渡动画中，可以不用显示设置动画的from和to 值，默认会将from值设置为当前状态值，to 设置目标状态值
//注意：默认情况下，任何状态的修改，都会触发过渡动画。可以通过设置动画的from和to,来限制 只从一个状态到另一个状态的特定应用
//注意：如果定义了多个过渡动画，会并行运行过渡动画，如果想过渡动画串行运行需要使用SequentialAnimation
//注意：如果状态绑定的属性和Behavior绑定的属性一致时，过渡动画会覆盖Behavior动画，即过渡动画生效，Behavior动画不生效
//Transition: 过渡动画
// animations : list<Animation> :过渡动画列表
// enabled : bool
// from : string: 起始状态（State）名称
// to : string: 终止状态（State）名称
// reversible : bool：当触发此变换的条件反转时是否应自动反转转换
// running : bool
//注意reversible：只有设置为串行动画，且 from或to 设置某个值，reversible = true 才会可逆的运行动画。
//同时reversible的效果还受 PropertyChanges 中的 restoreEntryValues 影响，如果restoreEntryValues:false 也不会生效
Rectangle{
anchors.fill: parent
Row{
id:idRow1
spacing: 20
//按下会修改高度为50，颜色为green,释放被还原，动画时并行的
Rectangle {
id:idRec1
width: 100; height: 100
color: "blue"
states: [
State {
name: "state1"
when: idMoArea.pressed; //当鼠标按下触发状态
PropertyChanges {
target: idRec1
restoreEntryValues: true //true 状态离开会还原为默认值
height: 50
color:"green"
}
}
]
transitions: [
Transition {
reversible: true
to:"state1"
//两个动画时并行的
SequentialAnimation{
NumberAnimation{
property: "height"
duration: 2000
}
ColorAnimation {
duration: 2000
}
}
}
]
MouseArea{
id:idMoArea
anchors.fill: parent
}
}
Rectangle {
id:idRec2
width: 100; height: 100
color: "blue"
states: [
State {
name: "state1"
// when: idMoArea2.pressed; //当鼠标按下触发状态
PropertyChanges {
target: idRec2
height: 50
color:"green"
}
},
State {
name: "state2"
// when: idMoArea2.pressed; //当鼠标按下触发状态
PropertyChanges {
target: idRec2
height: 80
color:"red"
}
}
]
transitions: [
Transition {
to:"state1" //如果明确指定了to state1,只能匹配to "state1"
NumberAnimation{
property: "height"
duration: 2000
}
ColorAnimation {
duration: 2000
}
},
Transition {
//两个动画时并行的
NumberAnimation{
property: "height"
duration: 500
}
ColorAnimation {
duration: 500
}
onRunningChanged: {
if(running)
console.log("default transition")
}
}
]
MouseArea{
id:idMoArea2
anchors.fill: parent
onClicked: {
parent.state = "state2"
}
}
}
Rectangle {
id:idRec3
width: 100; height: 100
color: "blue"
states: [
State {
name: "state1"
when: idMoArea3.pressed; //当鼠标按下触发状态
PropertyChanges {
target: idRec3
restoreEntryValues: true //true 状态离开会还原为默认值
height: 50
color:"green"
}
}
]
transitions: [
Transition {
reversible: true
//两个动画时并行的
NumberAnimation{
property: "height"
duration: 2000
}
ColorAnimation {
duration: 2000
}
}
]
MouseArea{
id:idMoArea3
anchors.fill: parent
}
}
}
}
Transition实例代码运行结果如下：
1.从左到右：第一个矩形鼠标按下后先高度变为50在由蓝色变为绿色，鼠标释放，可逆操作发生，先绿色变为蓝色再由高度50变为100；可以对比第一个和第三个，第三个矩形可逆顺序不对。第二个矩形验证任何状态发生变化时，会选择一个最适配的过渡去运行。
2.效果图如下：
