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

經過前面兩個教程，文字也能顯示，也能處理鼠標事件了，來點動畫吧。

這個教程實現了當鼠標按住的時候，Hello,World從頂部到底部的一個旋轉過程，并帶有顏色漸變的效果。

完整的源代碼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)的代碼增加出來的內容。

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內嵌于Text之中，可以為Text元素添加多個狀態，現在的這個例子只增加了一個狀態。該狀態的名為為”down”,然后由“when”指 定了什么時候觸發這個狀態。PropertyChanges則指定了哪個元素的哪些屬性會發生什么樣的變化。例子中PropertyChanges利用 “target”指定了id為”helloText”的元素會發生變化，包括其y,rotation,color等屬性。

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

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

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