Qt 5 開發(fā)及實例（第5版） 課件 第20章 QML動畫特效

QT5開發(fā)及實例（第5版）第20章QML動畫特效——QML動畫元素01PropertyAnimation元素PropertyAnimation元素PropertyAnimation（屬性動畫元素）是用來為屬性提供動畫的最基本的動畫元素，它直接繼承自Animation元素，可以用來為real、int、color、rect、point、size和vector3d等屬性設置動畫。一般的使用方式有如下幾種：

作為屬性值的來源。可以立即為一個指定的屬性使用動畫。

在信號處理器中創(chuàng)建。當接收到一個信號（如鼠標單擊事件）時觸發(fā)動畫。

作為獨立動畫元素。像一個普通QML對象一樣地被創(chuàng)建，不需要綁定到任何特定的對象和屬性。

在屬性值改變的行為中創(chuàng)建。當一個屬性改變值時觸發(fā)動畫，這種動畫又叫“行為動畫”。PropertyAnimation元素【例】（簡單）（CH2001）編程演示動畫元素多種不同的使用方式，運行效果如圖，圖中以虛線箭頭標示出各圖形的運動軌跡，其中，“屬性值源”矩形：始終在循環(huán)往復地移動；“信號處理”矩形：每單擊一次會往返運動3次；“獨立元素”矩形：每單擊一次移動一次；任意時刻在窗口內(nèi)的其他位置單擊鼠標，“改變行為”矩形都會跟隨鼠標移動。（2）定義4個矩形組件，代碼分別。（3）打開main.qml文件，編寫代碼。02其他動畫元素其他動畫元素【例】（簡單）（CH2002）編程演示其他各種動畫元素的應用，運行效果如圖，其中虛線箭頭標示出在程序運行中圖形運動變化的軌跡。實現(xiàn)步驟如下。（1）新建QML應用程序，項目名稱為“OtherAnimations”。（2）右擊項目視圖“資源”→“qml.qrc”下的“/”節(jié)點，選擇“添加新文件…”項，新建CircleRect.qml文件，編寫代碼。其他動畫元素（3）打開main.qml文件，編寫代碼如下：importQtQuick2.15importQtQuick.Window2.15

Window{width:640height:150visible:truetitle:qsTr("OtherAnimations")

Rectangle{width:360height:360anchors.fill:parent

CircleRect{ //使用組件x:50;y:30}}}03Animator元素Animator元素【例】（難度一般）（CH2003）用Animator實現(xiàn)一個矩形從窗口左上角旋轉(zhuǎn)著進入屏幕，運行效果如圖。實現(xiàn)步驟如下。（1）新建QML應用程序，項目名稱為“Animator”。（2）右擊項目視圖“資源”→“qml.qrc”下的“/”節(jié)點，選擇“添加新文件…”項，新建AnimatorRect.qml文件，編寫代碼。Animator元素（3）打開main.qml文件，編寫代碼如下：importQtQuick2.15importQtQuick.Window2.15

Window{width:320height:240visible:truetitle:qsTr("Animator")

Rectangle{width:360height:360anchors.fill:parent

AnimatorRect{} //使用組件}}QT5開發(fā)及實例（第5版）第20章QML動畫特效——動畫流UI界面01狀態(tài)和切換狀態(tài)和切換【例】（難度中等）（CH2004）用狀態(tài)切換機制實現(xiàn)文字的動態(tài)增強顯示，運行效果如圖，其中被鼠標選中的單詞會以藝術(shù)字放大，而釋放鼠標后又恢復原狀。實現(xiàn)步驟如下。（1）新建QML應用程序，項目名稱為“StateTransition”。（2）右擊項目視圖“資源”→“qml.qrc”下的“/”節(jié)點，選擇“添加新文件…”項，新建StateText.qml文件，編寫代碼。狀態(tài)和切換（3）打開main.qml文件，編寫代碼如下：importQtQuick2.15importQtQuick.Window2.15

Window{width:320height:240visible:truetitle:qsTr("StateTransition")

Rectangle{width:360height:360anchors.fill:parent

Row{anchors.centerIn:parentspacing:10StateText{text:"I"} //使用組件，要自定義其文本屬性StateText{text:"love"}StateText{text:"QML"}}}}02設計組合動畫設計組合動畫【例】（難度中等）（CH2005）用組合動畫實現(xiàn)照片的動態(tài)顯示，運行效果如圖。實現(xiàn)步驟如下。（1）新建QML應用程序，項目名稱為“ComplexAnimation”。（2）在項目工程目錄中建一個images文件夾，其中放入一張照片“zhou.jpg”。右擊項目視圖“資源”→“qml.qrc”下的“/”節(jié)點，選擇“添加現(xiàn)有文件…”項，從彈出的對話框中選擇該照片并打開，將其加載到項目中。（3）右擊項目視圖“資源”→“qml.qrc”下的“/”節(jié)點，選擇“添加新文件…”項，新建CAnimateObj.qml文件，編寫代碼。設計組合動畫（4）打開main.qml文件，編寫代碼如下：importQtQuick2.15importQtQuick.Window2.15

Window{width:660height:330visible:truetitle:qsTr("ComplexAnimation")

Rectangle{width:360height:360anchors.fill:parent

CAnimateObj{} //使用組件}}QT5開發(fā)及實例（第5版）第20章QML動畫特效——圖像特效013D旋轉(zhuǎn)3D旋轉(zhuǎn)【例】（難度一般）（CH2006）實現(xiàn)GIF圖像的立體旋轉(zhuǎn)，運行效果如圖，兩只蜜蜂在花冠上翩翩起舞，同時整個圖像沿豎直軸緩慢地轉(zhuǎn)動。實現(xiàn)步驟如下。（1）新建QML應用程序，項目名稱為“Graph3DRotate”。（2）在項目工程目錄中建一個images文件夾，其中放入一幅圖像“bee.gif”。右擊項目視圖“資源”→“qml.qrc”下的“/”節(jié)點，選擇“添加現(xiàn)有文件…”項，從彈出的對話框中選擇該圖像并打開，將其加載到項目中。（3）右擊項目視圖“資源”→“qml.qrc”下的“/”節(jié)點，選擇“添加新文件…”項，新建MyGraph.qml文件，編寫代碼。3D旋轉(zhuǎn)（4）打開main.qml文件，編寫代碼如下：importQtQuick2.15importQtQuick.Window2.15

Window{width:420height:320visible:truetitle:qsTr("Graph3DRotate")

Rectangle{width:360height:360anchors.fill:parent

MyGraph{} //使用組件}}02色彩處理色彩處理【例】（難度一般）（CH2007）實現(xiàn)單擊圖像使其亮度變暗，且對比度增強，運行效果如圖。實現(xiàn)步驟如下。（1）新建QML應用程序，項目名稱為“GraphEffects”。（2）在項目工程目錄中建一個images文件夾，其中放入一幅圖像“insect.gif”。右擊項目視圖“資源”→“qml.qrc”下的“/”節(jié)點，選擇“添加現(xiàn)有文件…”項，從彈出的對話框中選擇該圖像并打開，將其加載到項目中。（3）右擊項目視圖“資源”→“qml.qrc”下的“/”節(jié)點，選擇“添加新文件…”項，新建MyGraph.qml文件，