QML动画分组（Grouped Animations）

通常使用的动画比一个属性的动画更加复杂。例如你想同时运行几个动画并把他们连接起来，或者在一个一个的运行，或者在两个动画之间执行一个脚本。动画分组提供了很好的帮助，作为命名建议可以叫做一组动画。有两种方法来分组：平行与连续。你可以使用SequentialAnimation（连续动画）和ParallelAnimation（平行动画）来实现它们，它们作为动画的容器来包含其它的动画元素。

当开始时，平行元素的所有子动画都会平行运行，它允许你在同一时间使用不同的属性来播放动画。

1.// parallelanimation.qml
2.import QtQuick 2.0
3.
4.BrightSquare {
5.    id: root
6.    width: 300
7.    height: 200
8.    property int duration: 3000
9.
10.    ClickableImageV3 {
11.        id: rocket
12.        x: 20; y: 120
13.        source: "assets/rocket2.png"
14.        onClicked: anim.restart()
15.    }
16.
17.    ParallelAnimation {
18.        id: anim
19.        NumberAnimation {
20.            target: rocket
21.            properties: "y"
22.            to: 20
23.            duration: root.duration
24.        }
25.        NumberAnimation {
26.            target: rocket
27.            properties: "x"
28.            to: 160
29.            duration: root.duration
30.        }
31.    }
32.}

一个连续的动画将会一个一个的运行子动画。

1.// sequentialanimation.qml
2.import QtQuick 2.0
3.
4.BrightSquare {
5.    id: root
6.    width: 300
7.    height: 200
8.    property int duration: 3000
9.
10.    ClickableImageV3 {
11.        id: rocket
12.        x: 20; y: 120
13.        source: "assets/rocket2.png"
14.        onClicked: anim.restart()
15.    }
16.
17.    SequentialAnimation {
18.        id: anim
19.        NumberAnimation {
20.            target: rocket
21.            properties: "y"
22.            to: 20
23.            // 60% of time to travel up
24.            duration: root.duration*0.6
25.        }
26.        NumberAnimation {
27.            target: rocket
28.            properties: "x"
29.            to: 160
30.            // 40% of time to travel sideways
31.            duration: root.duration*0.4
32.        }
33.    }
34.}

分组动画也可以被嵌套，例如一个连续动画可以拥有两个平行动画作为子动画。我们来看看这个足球的例子。这个动画描述了一个从左向右扔一个球的行为：

要弄明白这个动画我们需要剖析这个目标的运动过程。我们需要记住这个动画是通过属性变化来实现的动画，下面是不同部分的转换：

从左向右的x坐标转换（X1）。

从下往上的y坐标转换（Y1）然后跟着一个从上往下的Y坐标转换（Y2）。

整个动画过程中360度旋转。

这个动画将会花掉3秒钟的时间。

我们使用一个空的基本元素对象（Item）作为根元素，它的宽度为480，高度为300。

1.import QtQuick 1.1
2.
3.Item {
4.    id: root
5.    width: 480
6.    height: 300
7.    property int duration: 3000
8.
9.    ...
10.}

我们定义动画的总持续时间作为参考，以便更好的同步各部分的动画。

下一步我们需需要添加一个背景，在我们这个例子中有两个矩形框分别使用了绿色渐变和蓝色渐变填充。

1. Rectangle {
2.        id: sky
3.        width: parent.width
4.        height: 200
5.        gradient: Gradient {
6.            GradientStop { position: 0.0; color: "#0080FF" }
7.            GradientStop { position: 1.0; color: "#66CCFF" }
8.        }
9.    }
10.    Rectangle {
11.        id: ground
12.        anchors.top: sky.bottom
13.        anchors.bottom: root.bottom
14.        width: parent.width
15.        gradient: Gradient {
16.            GradientStop { position: 0.0; color: "#00FF00" }
17.            GradientStop { position: 1.0; color: "#00803F" }
18.        }
19.    }

上面部分的蓝色区域高度为200像素，下面部分的区域使用上面的蓝色区域的底作为锚定的顶，使用根元素的底作为底。

让我们将足球加入到屏幕上，足球是一个图片，位于路径“assets/soccer_ball.png”。首先我们需要将它放置在左下角接近边界处。

1.    Image {
2.        id: ball
3.        x: 20; y: 240
4.        source: "assets/soccer_ball.png"
5.
6.        MouseArea {
7.            anchors.fill: parent
8.            onClicked: {
9.                ball.x = 20; ball.y = 240
10.                anim.restart()
11.            }
12.        }
13.    }

图片与鼠标区域连接，点击球将会重置球的状态，并且动画重新开始。

首先使用一个连续的动画来播放两次的y轴变换。

1.   SequentialAnimation {
2.        id: anim
3.        NumberAnimation {
4.            target: ball
5.            properties: "y"
6.            to: 20
7.            duration: root.duration * 0.4
8.        }
9.        NumberAnimation {
10.            target: ball
11.            properties: "y"
12.            to: 240
13.            duration: root.duration * 0.6
14.        }
15.    }

在动画总时间的40%的时间里完成上升部分，在动画总时间的60%的时间里完成下降部分，一个动画完成后播放下一个动画。目前还没有使用任何缓冲曲线。缓冲曲线将在后面使用easing curves来添加，现在我们只关心如何使用动画来完成过渡。

现在我们需要添加x轴坐标转换。x轴坐标转换需要与y轴坐标转换同时进行，所以我们需要将y轴坐标转换的连续动画和x轴坐标转换一起压缩进一个平行动画中。

1.    ParallelAnimation {
2.        id: anim
3.        SequentialAnimation {
4.            // ... our Y1, Y2 animation
5.        }
6.        NumberAnimation { // X1 animation
7.            target: ball
8.            properties: "x"
9.            to: 400
10.            duration: root.duration
11.        }
12.    }

最后我们想要旋转这个球，我们需要向平行动画中添加一个新的动画，我们选择RotationAnimation来实现旋转。

1.   ParallelAnimation {
2.        id: anim
3.        SequentialAnimation {
4.            // ... our Y1, Y2 animation
5.        }
6.        NumberAnimation { // X1 animation
7.            // X1 animation
8.        }
9.        RotationAnimation {
10.            target: ball
11.            properties: "rotation"
12.            to: 720
13.            duration: root.duration
14.        }
15.    }

我们已经完成了整个动画链表，然后我们需要给动画提供一个正确的缓冲曲线来描述一个移动的球。对于Y1动画我们使用Easing.OutCirc缓冲曲线，它看起来更像是一个圆周运动。Y2使用了Easing.OutBounce缓冲曲线，因为在最后球会发生反弹。（试试使用Easing.InBounce，你会发现反弹将会立刻开始。）。X1和ROT1动画都使用线性曲线。

下面是这个动画最后的代码，提供给你作为参考：

    ParallelAnimation {id: animSequentialAnimation {NumberAnimation {target: ballproperties: "y"to: 20duration: root.duration * 0.4easing.type: Easing.OutCirc}NumberAnimation {target: ballproperties: "y"to: 240duration: root.duration * 0.6easing.type: Easing.OutBounce}}NumberAnimation {target: ballproperties: "x"to: 400duration: root.duration}RotationAnimation {target: ballproperties: "rotation"to: 720duration: root.duration * 1.1}}

QML动画分组（Grouped Animations）相关推荐

5.QML动画——分组动画
动画可以为一个属性设置动画. 但是,通常想要同时或一个接一个地运行多个动画,或者在两个动画之间执行脚本.为此,出现了分组动画. 分组动画可以通过两种方式进行分组:并行或顺序.这两种方式分别对应Para ...
QML动画实战指南：打造华丽且高性能的用户界面动效
目录标题引言 QML与Qt Quick简介动画在现代UI设计中的重要性 QML Animation模块概述 QML动画基础概念属性动画(PropertyAnimation) 父动画(Parent ...
QML应用动画（Applying Animations）
目录一扩展可点击图像元素版本2(ClickableImage Version2) 1 第一个火箭 2 第二个火箭 3 第三个火箭动画可以通过以下几种方式来应用: 属性动画 - 在元素完整加载后自 ...
6.QML动画——状态与过渡
用户界面的各个部分可以用状态(state)来描述.状态定义了一组属性更改,并且可以由特定条件触发.这些状态可以附加过渡(transition),过渡定义发生状态更改时要运行的动画或动作. 一.状态(s ...
4.QML动画——概念、动画应用方式和动画的缓动曲线
一.动画动画将应用于属性更改. 动画通过对属性值定义插值曲线,控制属性值从一个值到另一个值平滑过渡. Qt Quick中的所有动画均由同一计时器控制,因此动画是同步的. 这样可以提高动画的性能和视质 ...
matlab绘制条形图：分组(grouped)与堆叠(stacked)混合作图
使用matlab中的bar函数,可以绘制出条形图其中条形图的样式可以指定为"grouped"(分组,即不同类数据横向并列),或者是"stacked"(堆叠,即 ...
Roson的Qt之旅#49 QML动画之Behavior
1.继承关系 Behavior和Animation之间不存在继承关系,但是Behavior有一个成员变量是Animation类型的: [default] animation : Animation 2 ...
android glide 动画,Glide-默认图与过渡动画(Placeholders Fade Animations)
写在前面:这篇文章作者是Norman Peitek,所有著作权归原作者所有,我只是在学习Glide的时候看到有简书的作者 weiyf 写了双语的翻译,觉得非常好,但是作者只写了几篇,估计是比较忙吧.于 ...
Qt_QML动画（Animations）___一
动画的解释: 动画被用于属性的改变. 一个动画定义了属性值改变的曲线, 将一个属性值变化从一个值过渡到另一个值. 动画是由一连串的目标属性活动定义的, 平缓的曲线算法能够引发一个定义时间内属性的持续变 ...

QML动画分组（Grouped Animations）

QML动画分组（Grouped Animations）相关推荐

最新文章

热门文章