溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
動畫應用場景有下面幾種
首先假設一個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分別提供并行和串行的動畫表現方案。
查看更多QML動畫使用方法
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
