動(dòng)畫（ Animations）
動(dòng)畫被?于屬性的改變。 ?個(gè)動(dòng)畫定義了屬性值改變的曲線， 將?個(gè)屬性值
變化從?個(gè)值過(guò)渡到另?個(gè)值。
//動(dòng)畫
Image{
id: imgAnim
source: "qrc:/meng.png"
//x屬性動(dòng)畫
NumberAnimation on x {
//移動(dòng)到300
to: 300
//持續(xù)4s
duration: 4000
//循環(huán)模式：無(wú)限
loops: Animation.Infinite
}
//rotation屬性動(dòng)畫
NumberAnimation on rotation {
//旋轉(zhuǎn)到360
to: 360
//持續(xù)4s
duration: 4000
//循環(huán)模式：無(wú)限
loops: Animation.Infinite
}
}
0_1527580541283_20180529_155456.gif
動(dòng)畫元素（ Animation Elements）
常用類
- PropertyAnimation（ 屬性動(dòng)畫） - 使?屬性值改變播放的動(dòng)畫
- NumberAnimation（ 數(shù)字動(dòng)畫） - 使?數(shù)字改變播放的動(dòng)畫
- ColorAnimation（ 顏?動(dòng)畫） - 使?顏?改變播放的動(dòng)畫
- RotationAnimation（ 旋轉(zhuǎn)動(dòng)畫） - 使?旋轉(zhuǎn)改變播放的動(dòng)畫
特殊類
- PauseAnimation（ 停?動(dòng)畫） - 運(yùn)?暫停?個(gè)動(dòng)畫
- SequentialAnimation（ 順序動(dòng)畫） - 允許動(dòng)畫有序播放
- ParallelAnimation（ 并?動(dòng)畫） - 允許動(dòng)畫同時(shí)播放
- AnchorAnimation（ 錨定動(dòng)畫） - 使?錨定改變播放的動(dòng)畫
- ParentAnimation（ ?元素動(dòng)畫） - 使??對(duì)象改變播放的動(dòng)畫
- SmotthedAnimation（ 平滑動(dòng)畫） - 跟蹤?個(gè)平滑值播放的動(dòng)畫
- SpringAnimation（ 彈簧動(dòng)畫） - 跟蹤?個(gè)彈簧變換的值播放的動(dòng)畫
- PathAnimation（ 路徑動(dòng)畫） - 跟蹤?個(gè)元素對(duì)象的路徑的動(dòng)畫
- Vector3dAnimation（ 3D容器動(dòng)畫） - 使?QVector3d值改變播放的動(dòng)畫
應(yīng)?動(dòng)畫（ Applying Animations）
- 屬性動(dòng)畫 - 在元素完整加載后?動(dòng)運(yùn)?
- 屬性動(dòng)作 - 當(dāng)屬性值改變時(shí)?動(dòng)運(yùn)?
- 獨(dú)?運(yùn)?動(dòng)畫 - 使?start()函數(shù)明確指定運(yùn)?或者running屬性被設(shè)置為true
接下來(lái)我們舉個(gè)例子
有三個(gè)圖片，
- 第一個(gè)圖片在程序啟動(dòng)后自動(dòng)跑到（300，0）的位置
- 第二個(gè)圖片在點(diǎn)擊后跑到（300，0）的位置，使用Behavior on 檢測(cè)屬性變化
- 第三個(gè)圖片在點(diǎn)擊后跑到（300，0）的位置，通過(guò)調(diào)用動(dòng)畫start方法
//動(dòng)畫
Column{
Image{
id: imgAnim
source: "qrc:/meng.png"
//x屬性動(dòng)畫
NumberAnimation on x {
//移動(dòng)到300
to: 300
//持續(xù)2s
duration: 2000
//循環(huán)模式：無(wú)限
loops: Animation.Infinite
}
}
Image{
id: imgAnim2
source: "qrc:/meng.png"
//x屬性動(dòng)畫
Behavior on x {
NumberAnimation{
//持續(xù)2s
duration: 2000
}
}
MouseArea{
anchors.fill: parent
onClicked: imgAnim2.x = 300
}
}
Image{
id: imgAnim3
source: "qrc:/meng.png"
//x屬性動(dòng)畫
NumberAnimation{
id: animX
//作用目標(biāo)
target: imgAnim3
//作用屬性: x
property: "x"
//開始點(diǎn)
from: 0
//結(jié)束點(diǎn)
to: 300
//持續(xù)2s
duration: 2000
}
MouseArea{
anchors.fill: parent
onClicked: animX.start()
}
}
}
0_1527581566626_20180529_161201.gif
緩沖曲線（ Easing Curves）
屬性值的改變能夠通過(guò)?個(gè)動(dòng)畫來(lái)控制， 緩沖曲線屬性影響了?個(gè)屬性值改變的插值算法
詳細(xì)請(qǐng)看qt文檔
其中一個(gè)例子
NumberAnimation{
//持續(xù)2s
duration: 2000
// 緩沖曲線
easing.type: Easing.InOutBack
}
0_1527581947388_5ee89d9d-efa4-40f5-875d-f8a94fd9e7a5-image.png
0_1527581995732_20180529_161922.gif
動(dòng)畫分組（ Grouped Animations）
如果你想執(zhí)行多個(gè)動(dòng)畫，那么你需要?jiǎng)赢嫹纸M
有兩種?法來(lái)分組： 平?與連續(xù)。 你可以使?SequentialAnimation（ 連續(xù)動(dòng)畫） 和ParallelAnimation（ 平?動(dòng)畫） 來(lái)實(shí)現(xiàn)它們， 它們作為動(dòng)畫的容器來(lái)包含其它的動(dòng)畫元素
- ParallelAnimation（ 平?動(dòng)畫）
//動(dòng)畫分組
Image{
id: imgAnimGroup
source: "qrc:/meng.png"
ParallelAnimation{
id: paralAnim
//屬性動(dòng)畫
NumberAnimation{ target: imgAnimGroup; property: "x"; from: 0; to: 300; duration: 2000; easing.type: Easing.Linear; }
//屬性動(dòng)畫
NumberAnimation{ target: imgAnimGroup; property: "y"; from: 0; to: 300; duration: 2000; easing.type: Easing.Linear; }
}
MouseArea{
anchors.fill: parent
onClicked: paralAnim.start()
}
}
0_1527582499409_20180529_162747.gif
- SequentialAnimation（ 連續(xù)動(dòng)畫）
//動(dòng)畫分組
Image{
id: imgAnimGroup
source: "qrc:/meng.png"
SequentialAnimation{
id: seqAnim
//屬性動(dòng)畫
NumberAnimation{ target: imgAnimGroup; property: "x"; from: 0; to: 300; duration: 2000; easing.type: Easing.Linear; }
//屬性動(dòng)畫
NumberAnimation{ target: imgAnimGroup; property: "y"; from: 0; to: 300; duration: 2000; easing.type: Easing.Linear; }
}
MouseArea{
anchors.fill: parent
onClicked: seqAnim.start()
}
}
0_1527582581310_20180529_162853.gif
