【开源】零基础接触Qt嵌入式开发 - QTCN开发网

离线itlevup

新手上路

图酷模式

只看楼主倒序阅读楼主发表于: 2018-01-14

开始零基础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吧！

更多知识分享，免费课程等，请关注公众号。