本文介紹的是Flickable和狀態與動畫，我們以前接觸過QML相關的內容，那麼本文介紹的內容就很明瞭了。先來看內容。
AD：
Flickable和狀態與動畫 下篇是本節要介紹的內容，Flickable和狀態與動畫 上篇，在這一節中我們再次講解一下Flickable彈動效果。
二、Flipable翻轉效果
在 Flipable{
- id:flipable; width:back.width; height:back.height
- property int angle : 0 //翻轉角度
- property bool flipped : false //用來標誌是否翻轉
- front: Image {source:”front.png”} //指定前面的圖片
- back: Image {source:”back.png”} //指定背面的圖片
- transform:Rotation{ //指定原點
- origin.x:flipable.width/2; origin.y:flipable.height/2
- axis.x:0; axis.y:1; axis.z:0 //指定按y軸旋轉
- angle:flipable.angle
- }
- states:State{
- name:”back” //背面的狀態
- PropertyChanges {target:flipable; angle:180}
- when:flipable.flipped
- }
- transitions: Transition {
- NumberAnimation{property:”angle”;duration:1000}
- }
- MouseArea{
- anchors.fill:parent
- onClicked:flipable.flipped =!flipable.flipped
- //當滑鼠按下時翻轉
- }
- }
- }
執行效果如下：
我們可以看到，使用Flipable時，我們需要設定其前面和後面的圖片，並設定背面的狀態，然後設定旋轉，併為狀態改變設定動畫就可以了。
通過改變轉軸和角度，我們可以使用Flipable設計出很多其他特效。
三、Flickable效果就是你可以拖動它，它會根據你滑鼠拖動的速度不同而移動不同的距離，並且這個移動好像有慣性一樣，就像你推一下平面上的玩具汽車一樣。我們看一個例子。
將程式程式碼更改如下：
- Rectangle{
- width:200; height:200
- Image{id: picture; source:”01.jpg”}
- contentWidth:picture.width
- contentHeight:picture.height
- }
- }
這時執行程式，我們拖動整個圖片，更改拖動的速度，這種感覺很爽！
我們拖動圖片的角落，它會自動彈回去
對於這樣一個較大的圖片，我們可以使用Flickable效果來檢視整張圖片。其實到底是否可以移動整個圖片，取決於contentWidth和contentHeight的大小。
我們如果將程式碼改為：contentWidth:100;contentHeight:100
那麼圖片就無法通過拖動顯示全部內容了。
對於QML的核心內容。因為QML Flipable、Flickable和狀態與動畫 下篇的內容介紹完了，希望本章內容對你有所幫助，更多內容請參考編輯推薦。