您好,登錄后才能下訂單哦!
動畫應(yīng)用場景有下面幾種
首先假設(shè)一個Rectangle動畫是要改變它的x和y值
1Rectangle一旦被創(chuàng)建就要移動到一個特定的位置
2動畫只有在某一個特定的外部行為觸發(fā)時候才會被觸發(fā)例如鼠標(biāo)單擊某一個控件時候產(chǎn)生動畫使目標(biāo)移動到指定的位置
3只有在某一個特定的信號后才觸發(fā)
4做為一個獨(dú)立的動畫雖然沒有綁定rectangle的運(yùn)動但是可以在腳本中加載開始和停止
5只有在狀態(tài)改變時候才會觸發(fā)
6只有在某一個屬性改變時候才觸發(fā)無論這個屬性是通過什么樣的方法來改變的
7在一個特定的信號處理器中創(chuàng)建當(dāng)接收到對應(yīng)的信號時候就觸發(fā)類似于3
下面分別用代碼來看幾種實(shí)現(xiàn)方法
【1】首先是對第一種場景
Rectangle{ color:"red" width:360 height:50 PropertyAnimation on x{to: 50 ;duration:1000; loops:Animation.Infinite } PropertyAnimation on y{to: 250 ;duration:1000; loops:Animation.Infinite } }
Rectangle一旦被創(chuàng)建就立刻從00坐標(biāo)移動到50250在一秒時間內(nèi)
【2】第二種場景代碼行為動畫在某一個屬性值發(fā)生變化時候觸發(fā)
Rectangle{ color:"red" width:360 height:50 id:rect Behavior on x { PropertyAnimation{ duration : 1000 } } Behavior on y { PropertyAnimation{ duration : 1000 } } } MouseArea{ anchors.fill: parent onClicked:{ rect.x=mouse.x; rect.y=mouse.y; } }
這段代碼實(shí)現(xiàn)了在點(diǎn)擊了屏幕上的一點(diǎn)后rect會在一秒的時間內(nèi)觸發(fā)動畫到達(dá)鼠標(biāo)所點(diǎn)擊的位置因為在onClicked里面我們修改了rect的x和y值。
【3】在信號處理器中觸發(fā)動畫
Rectangle{ color:"red" width:360 height:50 id:rect MouseArea{ anchors.fill: parent onClicked: PropertyAnimation{ target:rect ; properties:"y" to:250 duration:1000 } } }
當(dāng)點(diǎn)擊rect的時候就會觸發(fā)動畫使rect的y從0運(yùn)動到250
【4】動畫作為一個獨(dú)立的動畫可以像創(chuàng)建普通的QML對象一樣創(chuàng)建而不需要綁定特定的對象和屬性。
Rectangle{ color:"red" width:360 height:50 id:rect PropertyAnimation{ id:animation target:rect properties: "width" duration: 1000 } MouseArea{ anchors.fill: parent onClicked: { animation.to=50 animation.running=true; } } }
一個獨(dú)立的動畫對象默認(rèn)是沒有運(yùn)行的必須使用running屬性或者start() stop來運(yùn)行它。
【5】切換切換用來設(shè)置當(dāng)狀態(tài)發(fā)生改變時候需要創(chuàng)建一個切換Transition對象。然后把它添加到對象的transition屬性下面代碼
Rectangle{ Rectangle{ color:"gray" y:100 width:360 height:80 id:rect1 } //切換狀態(tài) Rectangle{ color:"steelblue" width:360 height:80 id:rect MouseArea{ anchors.fill: parent onClicked: { console.log("dddd") rect.state="move" rect1.height=50 rect1.state="move" } } states:[ State{ name:"move" PropertyChanges{ target:rect y:250 } PropertyChanges{ target:rect1 y:330 } } ] transitions: [ Transition { PropertyAnimation{ properties: "y" duration:5000 } } ] } }
當(dāng)點(diǎn)擊rect的時候rect和rect1的狀態(tài)切換到move狀態(tài)move狀態(tài)中的兩個PropertyChanges對象定義了rect和rect1的屬性改變值這時候Transition會自動被執(zhí)行Transition里面的PropertyAnimation對象會自動將rect和rect1的屬性值y切換到對應(yīng)的值這里并沒有設(shè)置from和to值在狀態(tài)開始和結(jié)束的時候已經(jīng)設(shè)置了他們的值。另外propertyAnimation并不需要指定target屬性這樣任何對象的y值在狀態(tài)切換時候都會使用這個動畫不過也可以指定一個target來使用這個動畫另外在Transition里面的東輝會并行執(zhí)行如果要串行執(zhí)行可以使用SequentiaAnimation.這個代碼也可以這樣來寫
Rectangle{ Rectangle{ color:"gray" y:100 width:360 height:80 id:rect1 } //切換狀態(tài) Rectangle{ color:"steelblue" width:360 height:80 id:rect MouseArea{ anchors.fill: parent onClicked: { console.log("dddd") rect.state="move" rect1.height=50 rect1.state="move" } } states:[ State{ name:"move" } ] transitions: [ Transition { PropertyAnimation{ target:rect from:0 to:250 properties: "y" duration:5000 } PropertyAnimation{ target:rect1 properties: "y" from:100 to:330 duration:2000 } } ] } }
[6]屬性動畫元素
PropertyAnimation元素是用來為屬性提供動畫最基本動畫元素他可以為real ,int ,color,rect,point,sized,vector3d來提供動畫設(shè)置。它可以被NumberAnimation,ColorAnimation,RotationAnimation,Vector3dAnimation等繼承他們分別提供了更高效的屬性動畫實(shí)現(xiàn)方式。并且任何基于PropertyAnimation的對象都可以設(shè)置easing屬性來動畫中使用的緩和曲線。
例如
Rectangle{ color:"gray" y:100 width:360 height:80 id:rect1 ColorAnimation on color { from: "white"; to: "red"; duration: 5000 } RotationAnimation on rotation{ from:0 to:360 direction: RotationAnimation.Clockwise duration:5000 } }
下面是代碼整體合起來和運(yùn)行效果
import QtQuick 2.2import QtQuick.Controls 1.1ApplicationWindow { visible: true width: 360 height: 480 title: qsTr("Hello World") menuBar: MenuBar { Menu { title: qsTr("File") MenuItem { text: qsTr("Exit") onTriggered: Qt.quit(); } } } Rectangle{ Rectangle{ color:"gray" y:100 width:360 height:80 id:rect1 ColorAnimation on color { from: "white"; to: "red"; duration: 5000 } RotationAnimation on rotation{ from:0 to:360 direction: RotationAnimation.Clockwise duration:5000 } } //切換狀態(tài) Rectangle{ color:"steelblue" width:360 height:80 id:rect MouseArea{ anchors.fill: parent onClicked: { console.log("dddd") rect.state="move" rect1.height=50 rect1.state="move" } } states:[ State{ name:"move" // PropertyChanges{ // target:rect // y:250 // } // PropertyChanges{ // target:rect1 // y:330 // } } ] transitions: [ Transition { PropertyAnimation{ target:rect from:0 to:250 properties: "y" duration:5000 easing.type: Easing.OutBounce } PropertyAnimation{ target:rect1 properties: "y" from:100 to:330 duration:2000 easing.type: Easing.OutBounce } } ] } } /* //初始化就觸發(fā)的動畫 Rectangle{ color:"red" width:360 height:50 PropertyAnimation on x{to: 50 ;duration:1000; loops:Animation.Infinite } PropertyAnimation on y{to: 250 ;duration:1000; loops:Animation.Infinite } } */ /* Rectangle{ color:"red" width:360 height:50 id:rect Behavior on x { PropertyAnimation{ duration : 1000 } } Behavior on y { PropertyAnimation{ duration : 1000 } } } MouseArea{ anchors.fill: parent onClicked:{ rect.x=mouse.x; rect.y=mouse.y; } } */ /* Rectangle{ color:"red" width:360 height:50 id:rect MouseArea{ anchors.fill: parent onClicked: PropertyAnimation{ target:rect ; properties:"y" to:250 duration:1000 } } } */ /* Column{ Rectangle{ color:"blue" width:360 height:50 TextInput{ anchors.fill: parent } } Rectangle{ color:"red" width:360 height:50 id:rect PropertyAnimation{ id:animation target:rect properties: "width" duration: 1000 } MouseArea{ anchors.fill: parent onClicked: { animation.to=50 animation.running=true; } } } } */ Text { text: qsTr("Hello World") anchors.centerIn: parent }}
紅色的巨型首先經(jīng)過一個360旋轉(zhuǎn)和變色然后點(diǎn)擊藍(lán)色的巨型就會像彈簧一樣落下來。
剛剛提到Transition中的組合動畫ParalleAnimation和SequentialAnimation分別提供并行和串行的動畫表現(xiàn)方案。
查看更多QML動畫使用方法
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。