Qml-Transition的使用

Qml-Transition的使用

Transition的概述

1. Transition：定义了当状态发生改变时应用的动画
2. 属性animations : list：(Transition)过渡的动画
3. 属性enabled : bool：状态发生变化时，是否使能此过渡（Transition）动画；
4. 属性from : string：过渡的起始状态(State)名称,默认为"*"(任何状态)
5. 属性to : string：过渡的结束状态(State)名称,默认为"*"(任何状态)
6. 属性reversible : bool：当触发此变换的条件反转时是否应自动反转转换
7. 属性running : bool：只读（read-only）,当前状态是否发生
8. 注意：默认情况下，任何状态的修改，都会触发过渡动画。可以通过设置动画的from和to,来限制 只从一个状态到另一个状态的特定应用
9. 注意：如果定义了多个过渡动画，会并行运行过渡动画，如果想过渡动画串行运行需要使用SequentialAnimation
10. 注意：如果状态绑定的属性和Behavior绑定的属性一致时，过渡动画会覆盖Behavior动画，即过渡动画生效，Behavior动画不生效
11. 注意：revesible的生效和PropertyChange 中restoreEntryValues属性有关系，restoreEntryValues 为false,不会生效。在本demo中，如果过渡有多个动画，revesible 生效需要同时满足：多个动画是串行动画（SequentialAnimation）且 from或to 属性要设置至少其中一个
12. 注意：如果有多个过渡可供选择，会有个匹配规则，如果指定了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: parentRow{id:idRow1spacing: 20//按下会修改高度为50，颜色为green,释放被还原，动画时并行的Rectangle {id:idRec1width: 100; height: 100color: "blue"states: [State {name: "state1"when: idMoArea.pressed;                 //当鼠标按下触发状态PropertyChanges {target: idRec1restoreEntryValues: true            //true 状态离开会还原为默认值height: 50color:"green"}}]transitions: [Transition {reversible: trueto:"state1"//两个动画时并行的SequentialAnimation{NumberAnimation{property: "height"duration: 2000}ColorAnimation {duration: 2000}}}]MouseArea{id:idMoAreaanchors.fill: parent}}Rectangle {id:idRec2width: 100; height: 100color: "blue"states: [State {name: "state1"// when: idMoArea2.pressed;                 //当鼠标按下触发状态PropertyChanges {target: idRec2height: 50color:"green"}},State {name: "state2"// when: idMoArea2.pressed;                 //当鼠标按下触发状态PropertyChanges {target: idRec2height: 80color:"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:idMoArea2anchors.fill: parentonClicked: {parent.state = "state2"}}}Rectangle {id:idRec3width: 100; height: 100color: "blue"states: [State {name: "state1"when: idMoArea3.pressed;                 //当鼠标按下触发状态PropertyChanges {target: idRec3restoreEntryValues: true            //true 状态离开会还原为默认值height: 50color:"green"}}]transitions: [Transition {reversible: true//两个动画时并行的NumberAnimation{property: "height"duration: 2000}ColorAnimation {duration: 2000}}]MouseArea{id:idMoArea3anchors.fill: parent}}}}

Transition实例代码运行结果如下：

1.从左到右：第一个矩形鼠标按下后先高度变为50在由蓝色变为绿色，鼠标释放，可逆操作发生，先绿色变为蓝色再由高度50变为100；可以对比第一个和第三个，第三个矩形可逆顺序不对。第二个矩形验证任何状态发生变化时，会选择一个最适配的过渡去运行。

2.效果图如下：