Animation（四-动画分组）

动画分组

• 例如你想同时运行几个动画并把他们连接起来，或者在一个一个的运行，或者在两个动画之间执行一个脚本。动画分组提供了很好的帮助，作为命名建议可以叫做一组动画

• 有两种方法来分组：平行与 连续。
• 可以使用SequentialAnimation（连续动画）和ParallelAnimation（平行动画）来实现它们，它们作为动画的容器来包含其它的动画元素

平行方式播放动画：

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    id:root
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    property int duration: 3000

    ClickedImage{
        id:rocket
        x:20
        y:250
        source: "qrc:/new/prefImg/rocket.png"
        onClicked: anim.restart()
    }

    // 平行动画分组
    // 平行动画分组里面有两个动画（或者叫一组）
    // 这些动画将同时执行
    // 这里的效果将是“向右移动”和“向上移动”同时进行
    ParallelAnimation{
        id:anim
        // 向上移动到 20
        NumberAnimation{
            target: rocket
            properties: "y"
            to:20
            duration: root.duration
        }
        // 向右移动到 550
        NumberAnimation{
            target: rocket
            properties: "x"
            to:550
            duration: root.duration
        }
    }
}

平行动画分组里面有两个动画（或者叫一组），这些动画将同时执行，这里的效果将是“向右移动”和“向上移动”同时进行！

运行>>

两个动画同时执行成功！

接下来试验一下连续动画！

代码：

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    id:root
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    property int duration: 3000

    ClickedImage{
        id:rocket
        x:20
        y:250
        source: "qrc:/new/prefImg/rocket.png"
        onClicked: anim.restart()
    }

    // 平行动画分组
    SequentialAnimation{
        id:anim
        // 向上移动到 20
        NumberAnimation{
            target: rocket
            properties: "y"
            to:20
            duration: root.duration
        }
        // 向右移动到 550
        NumberAnimation{
            target: rocket
            properties: "x"
            to:550
            duration: root.duration
        }
    }
}

很简单，就是把 ParallelAnimation 换为了 SequentialAnimation！

运行>>

嗯嗯！