QML系列教程(6)-平行动画ParallelAnimation+序列动画SequentialAnimation

所谓平行动画，就是同时播放多个动画；

所谓序列动画，就是依次播放多个动画；

先看一个平行动画的例子，让一个矩形的x坐标从0 -> 100,  y坐标也从0 -> 100，效果是矩形从左上角直接移动到画布中间。

 

//本代码用来演示 [平行动画] 和 [序列动画] 的用法
import QtQuick 2.0

Item {
    id: root
    width: 200
    height: width

    Rectangle{
        id: rect
        x: 0;
        y: 0;
        width: 30
        height: width;
        color: "red"
    }
    
    ParallelAnimation{ //平行动画
        id: rectPrlAni
        running: mouseArea.pressed //属性绑定，动画运行与否，取决于mouseArea是否被按下
        NumberAnimation {target: rect; property: "x"; from: 0; to: 100; duration: 1000}//平行[1]：数值动画
        NumberAnimation {target: rect; property: "y"; from: 0; to: 100; duration: 1000}//平行[2]: 数值动画
    }

    MouseArea{
        id: mouseArea
        anchors.fill: parent
    }
}

代码很简单，没啥好说的，里面用到了一个小技巧，就是设置动画的running属性，绑定到MouseArea的pressed属性上，这样我们可以实现，按下鼠标不松手时，播放动画，松手时，随时暂停动画。

 

效果图：

 

下面是一个序列动画的例子，先后依次执行3步动画：

1、坐标从(0, 0) 移动到 (100, 100)处
2、大小从(30,30)变大为(100,100)
3、圆角半径从0变为50

其中，第1步动画，本身又是一个平行动画

//本代码用来演示 [平行动画] 和 [序列动画] 的用法
import QtQuick 2.0

Item {
    id: root
    width: 200
    height: width

    Rectangle{
        id: rect
        x: 0;
        y: 0;
        width: 30
        height: width;
        color: "red"
    }

    SequentialAnimation { //序列动画
        id: rectSeqAni
        running: mouseArea.pressed
        ParallelAnimation{ //序列[1]: 平行动画
            id: rectPrlAni
            NumberAnimation {target: rect; property: "x"; from: 0; to: 100; duration: 1000}
            NumberAnimation {target: rect; property: "y"; from: 0; to: 100; duration: 1000}
        }
        NumberAnimation {target: rect; property: "width";  to: 100; duration: 1000}//序列[2]:数值动画
        NumberAnimation {target: rect; property: "radius";  to: 50; duration: 1000}//序列[3]:数值动画
    }

    MouseArea{
        id: mouseArea
        anchors.fill: parent
    }

}

效果图：（录屏软件有拖影bug，实际上软件运行时是没有拖影的）