开始零基础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吧!
更多知识分享,免费课程等,请关注公众号。