26.Qt Quick QML-RotationAnimation、PathAnimation、SmoothedAnimation、Behavior、PauseAnimation、SequentialAnimation和ParallelAnimation

1.RotationAnimation
RotationAnimation也是繼承於PropertyAnimation元件,但是它有點特殊,它只需要指定taget目標物件,並且不需要指定property,因為rotation就是要繫結的屬性.並且它還多了個direction屬性:

• direction : enumeration,設定旋轉的方向,取值有:
  • RotationAnimation.Numerical (預設值) - 數值旋轉,通過to-from得出要旋轉的度數,然後進行旋轉,比如from為10,to為100,那麼旋轉就是90°
  • RotationAnimation.Clockwise - 在兩個度數之間進行順時針旋轉,比如from為10,to為100,那麼順旋轉就是90°
  • RotationAnimation.Counterclockwise - 在兩個度數之間進行逆時針旋轉,比如from為10,to為100,那麼逆旋轉就是90°
  • RotationAnimation.Shortest - 沿最短路徑的方向旋轉。比如from為10,to為350,那麼將逆時針旋轉20°

示例如下所示:

　　property var rotationModel: [
        ["#00FF00", RotationAnimation.Numerical],
        ["#FF0000", RotationAnimation.Clockwise],
        ["#0000FF", RotationAnimation.Counterclockwise],
        ["#00FFFF", RotationAnimation.Shortest],
    ]
    property var animations: new Array(0)

    MouseArea {
        id: area
        anchors.fill: parent
        onPressed: {
            for (var i in animations) {
                console.log(animations[i].direction)
                animations[i].start();
            }
        }
    }

    Row {
        spacing: 10
        Repeater {
            model: rotationModel.length
            Rectangle {
                id: rect
                width: 100
                height: 100
                radius: width / 2
                color: rotationModel[index][0]
                Text {
                    anchors.centerIn: parent
                    text: "model"+ index.toString()
                    color: "white"
                    font.pixelSize: 18
                    font.bold: true
                }
                RotationAnimation {
                    running: true
                    duration: 500
                    target: rect
                    direction: rotationModel[index][1]
                    from :  10
                    to :  350
                    Component.onCompleted: animations[index] = this
                }
            }
        }
    }

效果如下所示:

 

2.PathAnimation
PathAnimation繼承於Animation元件,用來實現一個路徑動畫.

它的屬性如下所示:

• anchorPoint : point,設定目標瞄點,預設為目標的左上角（其0,0點）將定位到（或跟隨）路徑。比如10x10的Rectangle,那麼anchorPoint為Qt.point(5, 5)時則表示始終讓物體中心處於路徑上
• duration : int,持續時間
• easing.type : enumeration,設定動畫的緩和曲線.預設值為Easing.Linear(線性過程),比如我們設定為Easing.InQuad時,動畫效果就是從慢到快的過程.
• easing.amplitude : real,設定緩和曲線的振幅,預設值為1.0,值越大振幅越大,僅當easing.type為Easing.InBounce, Easing.OutBounce, Easing.InOutBounce, Easing.OutInBounce, Easing.InElastic, Easing.OutElastic, Easing.InOutElastic or Easing.OutInElastic才生效
• orientation : enumeration,設定物件在路徑上的方向,取值有以下幾種:
  • PathAnimation.Fixed (default) - 在動畫中只是移動物體,並不旋轉物體
  • PathAnimation.RightFirst - 始終讓目標的右側在前面沿著路徑移動
  • PathAnimation.LeftFirst - 始終讓目標的左側在前面沿著路徑移動
  • PathAnimation.BottomFirst - 始終讓目標的底部在前面沿著路徑移動
  • PathAnimation.TopFirst - 始終讓目標的頂部在前面沿著路徑移動
• endRotation : real,設定目標移動路徑結束後的旋轉角度,如果orientationEntryDuration未設定,物體則會直接跳轉到該值,否則就以動畫的形式結束
• orientationEntryDuration : real,設定啟動時的旋轉過渡時間(毫秒單位),比如啟動動畫時,如果當前目標方向和orientation值方向不一致,則需要一個過渡時間才行
• orientationExitDuration : real,設定結束時的旋轉過渡時間(毫秒單位),如果endRotation已設定,那麼就會有個過渡時間,讓物體最終旋轉到endRotation角度.
• target : Item ,設定動畫的目標物件
• path : Path,設定動畫的路徑。

接下來我們便來講解Path路徑

3.Path
一個Path可以由下面多個Path段組成:

• PathLine : 由一個座標指定的直線路徑
• PathPolyline : 由一個path座標列表指定的多段路徑
• PathQuad : 由一個控制點生成的二次貝塞爾曲線路徑
• PathCubic : 由兩個控制點生成的三次貝塞爾曲線路徑
• PathArc : 由結束座標,以及一個radiusX和radiusY半徑實現的一個圓弧(順時針繪畫)
• PathAngleArc : 由中心點、半徑和起始角度startAngle、旋轉角度sweepAngle指定的圓弧。
• PathCurve :由一個座標點生成的curve曲線路徑(通常需要配合多個PathCurve才行)
• PathSvg : 由SVG路徑字串實現的路徑。你可以用它建立線條, 曲線, 弧形等等

顯示一個Path路徑
我們可以通過設定context2D的path屬性,來顯示出我們繪畫的Path路徑,不然都不知道繪製的路徑到底對不對,真是"半夜吃黃瓜-摸不著頭尾"
我們以PathArc為例,示例如下所示:

Canvas {
            id: canvas
            anchors.fill: parent
            antialiasing: true

            onPaint: {
                var context = canvas.getContext("2d")
                context.clearRect(0, 0, width, height)
                context.strokeStyle = "black"
                context.path = path
                context.stroke()
            }
        }

        Path {
            id: path
            startX: 100; startY: 100

            PathArc {
              x: 100; y: 140
              radiusX: 100; radiusY: 50
              useLargeArc: true
              xAxisRotation: 30
            }
}

效果如下所示:

 

這裡我們設定弧線的起始位置為(100,100),終點位置為(100,140).
它的useLargeArc為true,表示使用角度大的那個圓弧,如果設定為false,則將會使用小的那個圓弧
它的xAxisRotation表示x水平方向是否傾斜,我們這裡按順時針傾斜了30°,該值僅在x和y半徑不同時有用，這意味著圓弧是橢圓形的

接下來我們便來學習PathSvg路徑.
4.PathSvg
PathSvg支援的命令如下所示:

• M = moveto,移動畫筆到指定點處(只是移動位置,不畫線),寫法:M x y
• L = lineto,從當前點繪製一條直線到目的點,寫法:L x y
• H = horizontal lineto,繪製一條平行線,寫法:H x
• V = vertical lineto,繪製一條垂直線,寫法:V y
• C = curveto,繪製一條三次貝塞爾曲線,寫法:C x1 y1, x2 y2, x y (x和y為終點,其它兩個為控制點)
• S = smooth curveto,用來寫在C命令後面時來延長貝塞爾曲線,當然也可以跟在S命令後面,寫法:S x1 y1, x y(x1和y1是控制點,x和y是終點)
• Q = quadratic Bézier curve,繪製一條二次貝塞爾曲線,寫法:Q x1 y1, x y
• T = smooth quadratic Bézier curveto,用來寫在Q命令後面時來延長貝塞爾曲線,當然也可以跟在T命令後面,寫法:T x y
• A = elliptical Arc,繪製一條圓弧,寫法:A rx ry x-axis-rotation large-arc-flag sweep-flag x y
  • rx、ry:表示圓弧的半徑
  • x-axis-rotation: 表示x水平方向是否傾斜,比如設定為-45,則圓弧會逆時針傾斜45°,注意:該值僅在x和y半徑不同時有用，這意味著圓弧是橢圓形的
  • large-arc-flag:設定為0表示繪製小圓弧,為1表示大圓弧
  • sweep-flag: 表示弧線的方向，0表示從起點到終點沿逆時針畫弧，1表示從起點到終點沿順時針畫弧
  • x、y:表示繪製的終點位置
• Z = closepath,關閉路徑,將會從當前點繪製一條直線到開始點.

5.PathAnimation使用PathSvg示例

Canvas {
            id: canvas
            anchors.fill: parent
            antialiasing: true
            onPaint: {
                var context = getContext("2d")
                context.clearRect(0, 0, width, height)
                context.strokeStyle = "red"
                context.path = pathAnim.path
                context.stroke()
            }
    }

    PathAnimation {
        id: pathAnim
        running: true
        loops: Animation.Infinite
        duration: 5000
        easing.type: Easing.InQuad
        target: car
        orientation: PathAnimation.RightFirst
        anchorPoint: Qt.point(car.width/2, car.height)
        path: Path {
            startX: 100; startY: 100

            PathSvg {
               path: "M100 100 C600 50, 50 300, 550 250"
            }
        }
    }

    Item {
        id: car
        x: 25; y: 25
        width: 80; height: 38

        Canvas {
            id: canvas2
            anchors.fill: parent
            antialiasing: true
            onPaint: {
                var context = getContext("2d")
                context.clearRect(0, 0, width, height)
                context.fillStyle = "blue"
                context.fillRect(0,0,width,height-10)

                context.fillStyle = "yellow"
                context.ellipse(10,height-20,20,20)

                context.ellipse(width-30,height-20,20,20)
                context.fill()
                console.log(width,height)
            }
        }

        Text {
            anchors.centerIn: parent
            text: "小車"
            color: "white"
        }
    }

效果如下所示:

 

6.SmoothedAnimation
SmoothedAnimation繼承於NumberAnimation元件,它比NumberAnimation更加人性化,不僅可以設定duration時間,還可以設定滑動速率。
並且SmoothedAnimation的easing.type預設值為Easing.InOutQuad(慢->快->慢).
SmoothedAnimation如果同時指定了velocity速度和duration持續時間，則會選擇導致動畫速度最快的那個所需時間.
例如:

• 如果velocity速度設定為200，如果duration設定為5000.
• 假如此時需要將一個物體從0位移到800，那麼此時將會選擇velocity速度的時間,因為只需要4秒時間.
• 假如此時需要將一個物體從0位移到2000，那麼此時將會選擇duration時間,因為只需要5秒時間.

它的屬性如下所示:

• duration : int,持續時間,預設值為-1.表示禁用持續時間值。
• reversingMode : enumeration,設定如果動畫方向被突然被反轉後的行為(比如當前動畫正在往左邊移動時,突然使用者讓動畫往右邊移動),取值如下所示:
• SmoothedAnimation.Eased(預設)-動畫將按照速度平滑減速到0後,開始反轉方向加速
• SmoothedAnimation.Immediate-動畫將立即以0的速度開始反向加速
• SmoothedAnimation.Sync-立即將屬性設定為目標值
• velocity : real,設定速度,預設值為200(200畫素點每秒),如果將此設定為-1(預設值)將禁用速度值。

示例如下所示:

    MouseArea {
            anchors.fill: parent
            hoverEnabled: true
            onPositionChanged: {

                animation1.to = mouseX - rect.width/2
                animation2.to = mouseY - rect.height/2
                animation1.restart()
                animation2.restart()
            }
        }

    Rectangle {
        id: rect
        color: "red"
        width: 60; height: 60
        radius: width/2

        SmoothedAnimation on x{
            id: animation1
            velocity: 100
            reversingMode: SmoothedAnimation.Immediate
        }
        SmoothedAnimation on y{
            id: animation2
            velocity: 100
            reversingMode: SmoothedAnimation.Immediate
        }

    }

只要當我們滑鼠位置發生改變就會啟動SmoothedAnimation動畫進行平滑移動,但是我們這樣寫,程式碼顯得有點繁瑣,可以使用Behavior元件來代替設定from和to的行為來節省程式碼量
接下來我們來給大家講講Behavior.

7.Behavior
Behavior用來讓動畫繫結到物件一個屬性上,Behavior中文翻譯就是行為的意思,所以當繫結屬性發生改變時,就會自動觸發Behavior行為,Behavior就會自動設定動畫的to屬性,並啟動動畫.
Behavior只有兩個屬性animation和enabled, animation儲存著要觸發行為的哪個動畫,enabled表示是否使能行為，預設為true.
Behavior示例如下所示:

MouseArea {
        anchors.fill: parent
        hoverEnabled: true
        onPositionChanged: {
            rect.x = mouseX - rect.width/2
            rect.y = mouseY - rect.height/2
        }
    }

Rectangle {
    id: rect
    color: "red"
    width: 60; height: 60
    radius: width/2

    Behavior on x {
        SmoothedAnimation {
            velocity: 100
            reversingMode: SmoothedAnimation.Immediate
        }
    }
    Behavior on y {
        SmoothedAnimation {
            velocity: 100
            reversingMode: SmoothedAnimation.Immediate
        }
    }

}

這裡我們使用Behavior分別為屬性繫結了SmoothedAnimation動畫,然後我們只需要改變x,y屬性,就會自動觸發行為,設定我們改變的值到動畫的to屬性中,並啟動動畫

 

8.PauseAnimation
PauseAnimation顧名思義就是暫停動畫的意思,只有一個duration屬性,用來設定該期間內什麼都不做.
並且只能在SequentialAnimation動畫中使用,接下來我們便來學習SequentialAnimation和ParallelAnimation,並在程式碼中使用它

9.SequentialAnimation和ParallelAnimation
SequentialAnimation用來將多個動畫序列地執行下去.而ParallelAnimation是用來將多個動畫並行地執行下去.
並且SequentialAnimation和ParallelAnimation還可以互相巢狀.
需要注意的是:

• SequentialAnimation或ParallelAnimation中定義的動畫不能單獨啟動和停止;必須作為一個組來啟動和停止。
• 並且SequentialAnimation和ParallelAnimation的running預設為false.如果要想載入元件後立即啟動的話,我們需要手動設定(不需要全部設定,只需要設定最頂層動畫的running值即可)

示例如下所示:

Window{
    id: window
    width: 480
    height: 320
    visible: true

    SequentialAnimation {
        SequentialAnimation {
            ParallelAnimation {
                NumberAnimation {
                    target: ball1
                    property: "y"
                    from: 20
                    to: height - ball1.height - 20
                    easing.type: Easing.OutBounce;
                    duration: 1200
                }
                NumberAnimation {
                    target: ball2
                    property: "y"
                    from: 20
                    to: height - ball2.height - 20
                    easing.type: Easing.OutBounce;
                    duration: 800
                }
            }
        }
        PauseAnimation { duration: 500 }
        running: true
        loops: Animation.Infinite
    }

    Rectangle {
        id: ball1
        width: 40; height: 40;
        radius: 20
        color: "blue"
        x: 30
    }
    Rectangle {
        id: ball2
        width: 60; height: 60;
        radius: 30
        color: "red"
        x: 200
    }
}

效果如下所示:

如上圖所示,可以看到每當小球落到地後,就會啟動PauseAnimation暫停動畫,等待500ms