QML中的動畫處理

QML是一個寫界面非常不錯的工具，只要你有合適的UI界面，就可以非常快速的編寫完UI界面

 

QML也內置了許多動畫效果，動畫效果一般都是在屬性值上的變化，這些變化的方式，就構成了不同的動畫效果。從一個點到另一個點的，走法有n多種，采用哪種方法走法，會比較好看，QML內置了一些數學上的走路方式，用Easing來描述，不知道中文沒關系，記住對應圖關系即可，大部分以In，Out，InOut，OutIn為前綴，即有Quad，Cubic，Quart，Quint，Sine，Expo，Circ，Elastic，Back，Bounce。點擊此處查看詳細。

 

當元素有一些屬性需要修改時，QML定義了一些默認的屬性類型動畫處理

PropertyAnimation

NumberAnimation

Vector3dAnimation

ColorAnimation

RotationAnimation

ParentAnimation

AnchorAnimation

對於指定的屬性，使用指定的屬性Animation，效率會更好一些。

 

屬性的變化，在做成動畫時一般和狀態變化關聯在一起，而狀態變化的時候，屬性變化狀態，又可以通過tranistions這個特殊的屬性，進行更加復雜的動畫處理效果。如下面的例子，在pressed的時候，修改狀態為PRESSED，在released的時候，修改RELEASED，states屬性將依據修改的狀態變化進行屬性值修改，而transition則監控狀態的切換時屬性值是否修改，如果修改則應用該屬性值的Animation，從而形成動畫。

（ ColorAnimation用在Transition中時，將監控target的color屬性，當屬性變化時，會應用該ColorAnimation。）

 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}
         }
     ]
 }

 

有時候，可以通過Behavior這個屬性元素，對某個屬性進行監控，如

Behavior on x，則表示監控x的屬性值是否有變化，有變化並且enabled為true時，就應用Behavior元素中的設置。

 

當我們有多個元素都需要處理成動畫效果的時候，那么我們要區分，是同時變化還是按照順序來變化。

 

 

所有的Animation元素都是從Animation中繼承下來，有start,stop,resume,pause,restart,complete等方法。

 

除了常規的屬性元素，還有以下的元素

 

PauseAnimation

ScriptAction

PropertyAction

 

SmoothedAnimation

SpringAnimation

ParentAnimation

AnchorAnimation