QML是Qt推出的Qt Quick技術(shù)的一部分，是一種新增的簡便易學(xué)的語言。QML是一種陳述性語言，用來描述一個程序的用戶界面：無論是什么樣子，以及它如何表現(xiàn)。

經(jīng)過前面兩個教程，文字也能顯示，也能處理鼠標(biāo)事件了，來點動畫吧。

這個教程實現(xiàn)了當(dāng)鼠標(biāo)按住的時候，Hello,World從頂部到底部的一個旋轉(zhuǎn)過程，并帶有顏色漸變的效果。

完整的源代碼main.qml

import Qt 4.7  
 Rectangle {  
     id: page  
     width: 500; height: 200  
     color: "lightgray"  
     Text {  
         id: helloText  
         text: "Hello World!"  
         y: 30  
         anchors.horizontalCenter: page.horizontalCenter  
         font.pointSize: 24; font.bold: true  
 
         MouseArea { id: mouseArea; anchors.fill: parent }  
         states: State {  
             name: "down"; when: mouseArea.pressed == true  
             PropertyChanges { target: helloText; y: 160; rotation: 180; color: "red" }  
         }  
         transitions: Transition {  
             from: ""; to: "down"; reversible: true  
             ParallelAnimation {  
                 NumberAnimation { properties: "y,rotation"; duration: 500; easing.type: Easing.InOutQuad }  
                 ColorAnimation { duration: 500 }  
             }  
         }  
     }  
     Grid {  
         id: colorPicker  
         x: 4; anchors.bottom: page.bottom; anchors.bottomMargin: 4  
         rows: 2; columns: 3; spacing: 3  
         Cell { cellColor: "red"; onClicked: helloText.color = cellColor }  
         Cell { cellColor: "green"; onClicked: helloText.color = cellColor }  
         Cell { cellColor: "blue"; onClicked: helloText.color = cellColor }  
         Cell { cellColor: "yellow"; onClicked: helloText.color = cellColor }  
         Cell { cellColor: "steelblue"; onClicked: helloText.color = cellColor }  
         Cell { cellColor: "black"; onClicked: helloText.color = cellColor }  
     }  
 } 

除了這個main.qml之外，還有一個Cell.qml也是需要的，和教程(2)中的完全一樣。下面來看一看比起教程(2)的代碼增加出來的內(nèi)容。

Text{  
         ...  
         states: State {  
             name: "down"; when: mouseArea.pressed == true  
             PropertyChanges { target: helloText; y: 160; rotation: 180; color: "red" }  
         }  
         transitions: Transition {  
             from: ""; to: "down"; reversible: true  
             ParallelAnimation {  
                 NumberAnimation { properties: "y,rotation"; duration: 500; easing.type: Easing.InOutQuad }  
                 ColorAnimation { duration: 500 }  
             }  
         }  
        ...  
     } 

states內(nèi)嵌于Text之中，可以為Text元素添加多個狀態(tài)，現(xiàn)在的這個例子只增加了一個狀態(tài)。該狀態(tài)的名為為”down”,然后由“when”指 定了什么時候觸發(fā)這個狀態(tài)。PropertyChanges則指定了哪個元素的哪些屬性會發(fā)生什么樣的變化。例子中PropertyChanges利用 “target”指定了id為”helloText”的元素會發(fā)生變化，包括其y,rotation,color等屬性。

transitions 是用于增加動畫效果的（如果把transitions這一段代碼刪去，Hello,World的文字也會發(fā)生變化,但是看不到中間動畫漸變效果)。同樣可以看到transitions是復(fù)數(shù)形式，意味著可以添加多個動畫過程。“from”和”to”指明了當(dāng)前的動畫作用于哪兩個狀態(tài)變化之間。 “from”和”to”的參數(shù)名來自于State中的”name”屬性。

ParalleAnimation則指定了有多個 有多個動畫并行發(fā)生。NumberAnimation用于qreal類型的屬性變化,ColorAnimation則用于顏色變化。更多 Animation請在QML文檔中查找”Animation and Transitions”。

小結(jié)：三篇關(guān)于QML教程到此結(jié)束。不管是文字顯示，還是簡單的動畫效果，相信你可以和諧的去完成，希望本篇文章對你有所幫助。