動畫（Animation）和過度（Transition）元素
Transition - 狀態改變的過度動畫SequentialAnimation - 串行執行動畫ParallelAnimation - 并行執行動畫Behavior - 為屬性變化指定默認動畫PRopertyAction - 動畫中設置立即改變的屬性值（Sets immediate property changes during animation）PauseAnimation - 在動畫中引入暫停SmoothedAnimation - 運行屬性平滑的過度到一個新的值SpringAnimation - 以彈跳式的方式給屬性設置一個新值ScriptAction - 動畫中執行腳本動畫屬性元素的數據類型
PropertyAnimation - 屬性改變動畫NumberAnimation - qreal類型屬性改變動畫Vector3dAnimation - QVector3d類型屬性改變動畫ColorAnimation - 顏色改變動畫RotationAnimation -旋轉動畫ParentAnimation - parent更改動畫AnchorAnimation - 描點改變動畫在QML中,向屬性值應用animation元素來創建動畫.Animation元素通過篡改屬性的值來產生平滑的過度.同樣,也可使用狀態過度(state transition)向狀態變化設置一個動畫.
要創建動畫,需要使用與要創建動畫的屬性類型相匹配的animation元素,應用的動畫(animation)與需要的行為類型有關. 觸發動畫
有很多種方式在對象上設置動畫. 直接的屬性動畫Direct Property Animation
要實現立即移動或動畫移動,可直接設置屬性值.這可以在信號處理函數或附加屬性中實現..
Rectangle { id: blob width: 75; height: 75 color: “blue”
MouseArea { anchors.fill: parent onClicked: blob.color = "green" }}
然而,為產生更多控制,屬性動畫(property animation)使用在屬性變化值之間進行插值實現了平滑移動.屬性動畫提供了定時控制和由easing curves指定的不同插值曲線.
Rectangle { id: Flashingblob width: 75; height: 75 color: “blue” opacity: 1.0
MouseArea { anchors.fill: parent onClicked: { animateColor.start() animateOpacity.start() } } PropertyAnimation {id: animateColor; target: flashingblob; properties: "color"; to: "green"; duration: 100} NumberAnimation { id: animateOpacity target: flashingblob properties: "opacity" from: 0.99 to: 1.0 loops: Animation.Infinite easing {type: Easing.OutBack; overshoot: 500}}}
特定的屬性動畫元素(property animation elements)與PropertyAnimation元素的實現相比效率更好.他們向不同的QML類型如int,color,rotation設置動畫,PropertyAnimation可以設置parent改變動畫.
不同動畫屬性的更多信息詳見Controlling Animations小節. 狀態變化的過度
States是屬性的配置集合,針對不同的狀態設置不同的屬性值.狀態變化直接導致其中的屬性變化;動畫平滑過度可產生生動的狀態變化效果.
Transition元素自動實現了動畫元素(animation elements)的功能,為狀態變化引起的屬性變化產生插值.要設置一個對象的過度(transition),可構造其transitions屬性.
按鈕可能有兩個狀態,用戶點擊時為pressed狀態,用戶釋放鼠標后為released狀態.我們可以為每個狀態設置不同的屬性配置.過度(transition)可以為狀態從pressed改變為released產生動畫.同樣也可為狀態從released改變為pressed產生動畫.
Rectangle { width: 75; height: 75 id: button state: “RELEASED”
MouseArea { anchors.fill: parent onPressed: button.state = "PRESSED" onReleased: button.state = "RELEASED" } states: [ State { name: "PRESSED" PropertyChanges { target: button; color: "lightblue"} }, State { name: "RELEASED" PropertyChanges { target: button; color: "lightsteelblue"} } ] transitions: [ Transition { from: "PRESSED" to: "RELEASED" ColorAnimation { target: button; duration: 100} }, Transition { from: "RELEASED" to: "PRESSED" ColorAnimation { target: button; duration: 100} } ]}
to和from屬性綁定到特定的狀態名稱上,可以設置過度(transition)針對的屬性變化.為簡化或使過度對稱,可設置to屬性為通配符星號(“*”),指示這個過度可用于所有的狀態改變.
transitions: Transition { to: "*" ColorAnimation { target: button; duration: 100} }默認的行為動畫(Default Animation as Behaviors)
默認的屬性動畫使用行為動畫(behavior animations)來設置.使用指定屬性的Behavior元素聲明的動畫,使屬性值變化時產生動畫.然而,Behavior元素有一個enabled屬性可設置行為動畫的使能.
下面是一個球(ball)組件,可對其x,y,color屬性設置行為動畫(behavior animation).行為動畫被設置為模擬彈性效果.當球移動時就會在屬性值變化上應用這個彈性效果.
Rectangle { width: 75; height: 75; radius: width id: ball color: “salmon”
Behavior on x { NumberAnimation { id: bouncebehavior easing { type: Easing.OutElastic amplitude: 1.0 period: 0.5 } } } Behavior on y { animation: bouncebehavior } Behavior { ColorAnimation { target: ball; duration: 100 } }}
有很多種方式給屬性設置行為動畫.Behavior on 聲明是給屬性設置行為動畫的便利方式.
行為屬性的演示內容見Behaviors example. 串行或并行執行動畫
動畫可并行或串行運行.并行動畫可同時執行一組動畫,而串行動畫按順序執行一組動畫:一個執行完畢后在執行另一個.在SequentialAnimation 和ParallelAnimation中分組的動畫將串行或并行執行.
下面的banner組件需要一個挨一個的顯示多個圖標或廣告.opacity屬性變為1.0來表示一個不透明對象.使用SequentialAnimation元素,前一個動畫執行完畢后才會執行opacity動畫.ParallelAnimation元素將同時執行動畫.
Rectangle { id: banner width: 150; height: 100; border.color: “black”
Column { anchors.centerIn: parent Text { id: code text: "Code less." opacity: 0.01 } Text { id: create text: "Create more." opacity: 0.01 } Text { id: deploy text: "Deploy everywhere." opacity: 0.01 } } MouseArea { anchors.fill: parent onPressed: playbanner.start() } SequentialAnimation { id: playbanner running: false NumberAnimation { target: code; property: "opacity"; to: 1.0; duration: 200} NumberAnimation { target: create; property: "opacity"; to: 1.0; duration: 200} NumberAnimation { target: deploy; property: "opacity"; to: 1.0; duration: 200} }}
一旦有動畫被放在了SequentialAnimation 或 ParallelAnimation中, 他們就不會再獨立的啟動或停止.串行或并行動畫必須作為一個組合來啟動或停止.
SequentialAnimation元素在執行過度動畫(transition animations)時也很有效,因為在過度中的動畫是并行執行的.
有關在QML中創建和組合多個動畫的演示請見Animation basics example. 控制動畫
有不同的方式控制動畫. 動畫回放
所有的動畫元素都是從Animation元素繼承的;這些元素為動畫元素提供了必要的屬性和方法.動畫元素具有start(),stop(),resume(),pause()和complete()方法–這些方法控制了動畫的執行. Easing
Easing曲線定義動畫如何在起始值和終止值見產生插值.不同的easing曲線定義了一系列的插值.easing曲線簡化了創建動畫的效果–如彈跳效果, 加速, 減速, 和周期動畫.
QML對象中可能對每個屬性動畫都設置了不同的easing曲線.同時也有不同的參數用于控制曲線,有些是特除曲線獨有的.更多信息見easing 文檔.
easing example 可視化的演示了不同easing曲線類型效果. 其他動畫元素
此外,QML提供了幾個對動畫有用的其他元素:
PauseAnimation: 允許停止動畫ScriptAction: 允許在動畫期間執行javaScript,可與StateChangeScript配合來重用已存在的腳本.PropertyAction: 在動畫期間直接修改屬性,而不會產生屬性變化動畫下面是針對不同屬性類型的特殊動畫元素
SmoothedAnimation: 特殊的NumberAnimation,當目標值發生改變時提供平滑的動畫效果SpringAnimation: 指定mass, damping 和epsilon等特殊屬性來提供一個彈簧效果的動畫ParentAnimation: 用在parent變化時的動畫(見ParentChange)AnchorAnimation: 用在描點變化時的動畫(見AnchorChanges)新聞熱點
疑難解答
