开始零基础Qt嵌入式
开发系列免费课程之前,先使用
qml制作一些动画效果,让大家对枯燥的语言编程产生一丝兴趣。
本期制作了一个简陋的logo动画效果(
没有美工支持,先凑合看)。
鼠标点击
事件触发动画的两种不同状态。
代码:
import QtQuick 2.2
Rectangle {
id: root
width: 400
height: 200
color: "lightblue"
property bool status: false //是否碰撞的状态
Rectangle {
id: lBall
radius: width / 2
width: 50
height: 50
color: status ? "red" : "yellow"
anchors.verticalCenter: parent.verticalCenter
x: status ? root.width / 2 - lBall.width
: 0
Text {
anchors.centerIn: parent
text: qsTr("I")
}
Behavior on x {
NumberAnimation {
duration: 500; easing.type: Easing.InOutBack
}
}
Behavior on color {
ColorAnimation {
duration: 800
}
}
}
Rectangle {
id: rBall
radius: width / 2
width: 50
height: 50
color: status ? "red" : "yellow"
anchors.verticalCenter: parent.verticalCenter
x: status ? root.width / 2
: root.width - rBall.width
Text {
anchors.centerIn: parent
text: qsTr("T")
}
Behavior on x {
NumberAnimation {
duration: 500; easing.type: Easing.InOutBack
}
}
Behavior on color {
ColorAnimation {duration: 800}
}
}
Text {
id: logo
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: lBall.bottom
anchors.topMargin: 5
font.pixelSize: 16
font.bold: true
color: "red"
text: qsTr("职场进阶")
visible: status
Behavior on visible {
NumberAnimation { duration: 800 }
}
}
MouseArea {
anchors.fill: parent
onClicked: {
status = !status
}
}
}
同样的动画效果,还有
其他的实现方法,如果你对Qml感兴趣,那么动起手来,跟着大咖一起玩转Qml吧!
更多知识分享,免费课程等,请关注公众号。