import QtQuick 2.12
import QtQuick.Window 2.12
import QtCharts 2.3
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
Item {
id: root
anchors.fill: parent
Rectangle {
id: rect1
x: 0
y: 0
height: parent.height
width: parent.width / 3
color: 'red'
}
Rectangle {
id: rect2
x: parent.width / 3
y: 0
height: parent.height
width: parent.width / 3
color: 'orange'
// 宽度扩展到满屏的动画
NumberAnimation on width {
id: animation0
to: root.width
duration: 1000
running: false
}
// x值逐渐减少为0
NumberAnimation on x {
id: animation1
to: 0
duration: 1000
running: false
}
NumberAnimation on x {
id: animation2
to: root.width / 3
duration: 1000
running: false
}
NumberAnimation on width {
id: animation3
to: root.width / 3
duration: 1000
running: false
onFinished: {
// 显示
rect1.visible = true
rect3.visible = true
}
}
MouseArea {
anchors.fill: parent
anchors.bottomMargin: 185
anchors.leftMargin: 52
property bool flag: false
onClicked: {
if (!flag) {
// 隐藏
rect1.visible = false
rect3.visible = false
// 同时运行两个动画,才能达到预期的效果
animation0.running = true
animation1.running = true
} else {
animation2.running = true
animation3.running = true
}
flag = !flag
}
}
}
Rectangle {
id: rect3
x: parent.width * 0.666
y: 0
height: parent.height
width: parent.width / 3
color: 'green'
}
}
}
qml NumberAnimation 示例 2
最新推荐文章于 2023-12-05 23:55:24 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)