import QtQuick.Window 2.12
import QtQuick 2.13
import QtQml 2.13
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
Item {
id: root
anchors.fill: parent
Rectangle {
id: rect
anchors.left: parent.left
width: 300
height: 30
color: 'red'
Text {
id: txt
text: 'hello text'
color: 'orange'
font.pointSize: 20
}
}
// 定义状态转换时的过渡动画,,这个过渡动画只在状态切换时生效
transitions: [
Transition {
NumberAnimation {
properties: 'y'
duration: 2000
}
}
]
// 定义状态集
states: [
State {
name: 'test'
PropertyChanges {
target: rect
y: 300
}
},
State {
name: 'txt'
PropertyChanges {
target: txt
y: 300
}
}
]
Component.onCompleted: {
// root.state = 'txt'
root.state = 'test' // 切换状态生效状态的属性,因为设置了过渡动画所以会有动画效果
}
}
}
Qml transitions 过渡动画示例
最新推荐文章于 2024-04-13 23:26:51 发布