qml----動畫入門（四、簡單的動畫實現 PathAnimation類）

PathAnimation，根據以往的經驗來看，這個也是Animation的兒子（唔，也許是女兒~），而且專門處理Path的。沒錯，看官，你眼力真好

這個派生類可就能耐了，我們要多說點它的專屬本事

anchorPoint屬性---它來指定對象的哪個點鑲嵌在路徑上。比如一個圓，你如若設置了該屬性為圓的圓心，那么這個圓心就一直在路徑上運動。關於這個屬性，你可以按照"x,y"或者　　         Qt.point()構造一個Point對象賦值給它 

orientation屬性---控制目標對象沿着路徑運動的時的旋轉策略，它有幾個值，我們簡單的介紹幾個。剩下問幫助文檔

　　PathAnimation.Fixed　　這是一個默認的屬性，在運動的過程中保持物體不旋轉

　　PathAnimatino.LeftFirst　　旋轉目標對象時努力使目標對象的左側貼合路徑。同時，類似的有RightFirst以及BottomFirst等等

　　如果你指定了這個屬性，而對象到達路徑末端時的旋轉角度與你的期望不符，你可以設置endRotation來指定一個角度。

　　另外需要注意的方面是，如果指定了orientationExitDuration屬性，旋轉過程會以動畫的方式；否則，則是跳變得方式。

path屬性。這里就是構造一個路徑，這里構造的具體方法和過程參考幫助文檔

 

下面一個例子是用Canvas畫了半個圓，然后讓一個矩形圍繞這個半圓旋轉

import QtQuick 2.2

Canvas{
    width: 400
    height: 240

    onPaint: {
        var ctx = getContext("2d")
        ctx.lineWidth = 4
        ctx.strokeStyle = "red"
        ctx.beginPath()
        ctx.arc(200, 0, 160, Math.PI * 2, 0, false)
        ctx.stroke()
    }

    Rectangle{
        id: rect
        width: 40
        height: 40
        x: 20
        y: 0
        color: "blue"

        MouseArea{
            id: mouseArea
            anchors.fill: parent
            onClicked: pathAnim.start()
        }

        PathAnimation{
            id: pathAnim
            target: rect
            duration: 6000
            anchorPoint: "20, 20"
            orientationEntryDuration: 200
            orientationExitDuration: 200
            easing.type: Easing.InOutCubic

            orientation: PathAnimation.TopFirst
            path: Path{
                startX: 40
                startY: 20
                PathArc{
                    x: 360
                    y: 0
                    useLargeArc: true
                    radiusX: 160
                    radiusY: 160
                    direction: PathArc.Counterclockwise
                }
            }
        }
    }
}

效果如下