動畫應用場景有下面幾種
首先假設一個Rectangle動畫是要改變它的x和y值
1Rectangle一旦被創建就要移動到一個特定的位置
2動畫只有在某一個特定的外部行爲觸發時候纔會被觸發例如鼠標單擊某一個控件時候產生動畫使目標移動到指定的位置
3只有在某一個特定的信號後才觸發
4做爲一個獨立的動畫雖然沒有綁定rectangle的運動但是可以在腳本中加載開始和停止
5只有在狀態改變時候纔會觸發
6只有在某一個屬性改變時候才觸發無論這個屬性是通過什麼樣的方法來改變的
7在一個特定的信號處理器中創建當接收到對應的信號時候就觸發類似於3
下面分別用代碼來看幾種實現方法
【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一旦被創建就立刻從00座標移動到50250在一秒時間內
【2】第二種場景代碼行爲動畫在某一個屬性值發生變化時候觸發
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;
}
}這段代碼實現了在點擊了屏幕上的一點後rect會在一秒的時間內觸發動畫到達鼠標所點擊的位置因爲在onClicked裏面我們修改了rect的x和y值。
【3】在信號處理器中觸發動畫
Rectangle{
color:"red"
width:360
height:50
id:rect MouseArea{
anchors.fill: parent
onClicked:
PropertyAnimation{
target:rect ; properties:"y"
to:250
duration:1000
}
}
}當點擊rect的時候就會觸發動畫使rect的y從0運動到250
【4】動畫作爲一個獨立的動畫可以像創建普通的QML對象一樣創建而不需要綁定特定的對象和屬性。
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;
}
}
}一個獨立的動畫對象默認是沒有運行的必須使用running屬性或者start() stop來運行它。
【5】切換切換用來設置當狀態發生改變時候需要創建一個切換Transition對象。然後把它添加到對象的transition屬性下面代碼
Rectangle{
Rectangle{
color:"gray"
y:100
width:360
height:80
id:rect1 }
//切換狀態
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
}
}
]
}
}當點擊rect的時候rect和rect1的狀態切換到move狀態move狀態中的兩個PropertyChanges對象定義了rect和rect1的屬性改變值這時候Transition會自動被執行Transition裏面的PropertyAnimation對象會自動將rect和rect1的屬性值y切換到對應的值這裏並沒有設置from和to值在狀態開始和結束的時候已經設置了他們的值。另外propertyAnimation並不需要指定target屬性這樣任何對象的y值在狀態切換時候都會使用這個動畫不過也可以指定一個target來使用這個動畫另外在Transition裏面的東輝會並行執行如果要串行執行可以使用SequentiaAnimation.這個代碼也可以這樣來寫
Rectangle{
Rectangle{
color:"gray"
y:100
width:360
height:80
id:rect1 }
//切換狀態
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來提供動畫設置。它可以被NumberAnimation,ColorAnimation,RotationAnimation,Vector3dAnimation等繼承他們分別提供了更高效的屬性動畫實現方式。並且任何基於PropertyAnimation的對象都可以設置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
}
}下面是代碼整體合起來和運行效果
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
}
}
//切換狀態
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
}
}
]
}
}
/*
//初始化就觸發的動畫
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 }}
紅色的巨型首先經過一個360旋轉和變色然後點擊藍色的巨型就會像彈簧一樣落下來。
剛剛提到Transition中的組合動畫ParalleAnimation和SequentialAnimation分別提供並行和串行的動畫表現方案。