【代码全开放】零基础接触Qt嵌入式开发
开始零基础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吧! 更多知识分享,免费课程等,请关注公众号。 [attachment=18424]
|