安防网站模板下载,新冠流行最新消息,大气扁平网站,如何做网站推广自己产品Qml-Transition的使用
Transition的概述
Transition#xff1a;定义了当状态发生改变时应用的动画属性animations : list#xff1a;(Transition)过渡的动画属性enabled : bool#xff1a;状态发生变化时#xff0c;是否使能此过渡#xff08;Transition#xff09;动画…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 : listAnimation :过渡动画列表// 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: bluestates: [State {name: state1when: idMoArea.pressed; //当鼠标按下触发状态PropertyChanges {target: idRec1restoreEntryValues: true //true 状态离开会还原为默认值height: 50color:green}}]transitions: [Transition {reversible: trueto:state1//两个动画时并行的SequentialAnimation{NumberAnimation{property: heightduration: 2000}ColorAnimation {duration: 2000}}}]MouseArea{id:idMoAreaanchors.fill: parent}}Rectangle {id:idRec2width: 100; height: 100color: bluestates: [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 state1NumberAnimation{property: heightduration: 2000}ColorAnimation {duration: 2000}},Transition {//两个动画时并行的NumberAnimation{property: heightduration: 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: bluestates: [State {name: state1when: idMoArea3.pressed; //当鼠标按下触发状态PropertyChanges {target: idRec3restoreEntryValues: true //true 状态离开会还原为默认值height: 50color:green}}]transitions: [Transition {reversible: true//两个动画时并行的NumberAnimation{property: heightduration: 2000}ColorAnimation {duration: 2000}}]MouseArea{id:idMoArea3anchors.fill: parent}}}}
Transition实例代码运行结果如下
1.从左到右第一个矩形鼠标按下后先高度变为50在由蓝色变为绿色鼠标释放可逆操作发生先绿色变为蓝色再由高度50变为100可以对比第一个和第三个第三个矩形可逆顺序不对。第二个矩形验证任何状态发生变化时会选择一个最适配的过渡去运行。
2.效果图如下
