多个单一的动画可组合成一个复合动画，这可以使用ParallelAnimation或SequentialAnimation动画组元素来实现。在ParallelAnimation中的动画会同时（并行）运行，而在SequentialAnimation中的动画则会一个接一个（串行）地运行。要想运行复杂的动画，可以在一个动画组中进行设计。
本文实例用组合动画实现照片的动态显示，运行效果如下图所示。在图中单击灰色矩形区后，矩形开始沿水平方向做往返移动，与此同时，有一张照片从上方旋转着“掉落”下来。实现步骤如下。
(1) 新建项目
新建QML应用程序，项目名称为“ComplexAnimation”。
(2) 准备图片
在项目工程目录中建一个images文件夹，其中放入一张照片“test.jpg”。右击项目视图“Resources” 一 “qml.qrc”下的“/”节点，选择“Add Existing Files...”项，从弹出的对话框中选择该照片并打开，将其加载到项目中。
(3) 自定义元素
右击项目视图“Resources” — “qml.qrc”下的“/”节点，选择“Add New...”项，新建“AnimateObj.qml”文件，编写代码如下：
import QtQuick 2.12 // 使用 QtQuick 2.12支持 Animator 元素
Rectangle { //水平往返移动的矩形背景区
id: rect
width: 240
height: 300
color: "grey"
SequentialAnimation on x { // (a)
id: rectAnim
running: false //初始时关闭动画
loops: Animation.Infinite
/*实现往返运动*/
NumberAnimation {
from: 0; to: 500;
duration: 8000;
easing.type: Easing.InOutQuad
}
NumberAnimation {
from: 500; to: 0;
duration: 8000;
easing.type: Easing.InOutQuad
}
PauseAnimation {//在动画中间进行暂停
duration: 1000
}
}
Image { //图像元素显示照片
id: img
source: "images/test.jpg"
anchors.horizontalCenter: parent.horizontalCenter // 照片沿垂直中线下落
y: 0 // 初始时位于顶端
scale: 0.1 // 大小为原尺寸的1/10
opacity: 0 // 初始透明度为0(不可见)
rotation: 45 // 初始放置的角度
}
SequentialAnimation { // (b)
id: imgAnim
loops: Animation.Infinite
ParallelAnimation { // (c)
ScaleAnimator {
target: img;
to: 1;
duration: 1500
}
OpacityAnimator {
target: img;
to: 1;
duration: 2000
}
RotationAnimator {
target: img;
to: 360;
duration: 1500
}
NumberAnimation {
target: img
property: "y"
to: rect.height - img.height //运动到矩形区的底部
easing.type: Easing.OutBounce //为造成照片落地后又“弹起”的效果
duration: 5000
}
PauseAnimation { duration: 2000 }
ParallelAnimation { // 重回初始状态
NumberAnimation {
target: img
property: "y"
to: 0
easing.type: Easing.OutQuad
duration: 1000
}
OpacityAnimator { target: img; to: 0; duration: 1000 }
}
}
}
MouseArea {
anchors.fill: parent
onClicked: {
rectAnim.running = true //开启水平方向（矩形往返）动画
imgAnim. running = true //开启垂直方向（照片掉落）动画
}
}
}其中，
- (a) SequentialAnimation on x{…}:创建了SequentialAnimation来串行地运行3个动画：NumberAnimation(右移）、NumberAnimation(左移）和PauseAnimation(停顿）。这里的SequentialAnimation作为属性值源动画应用在Rectangle的x属性上，动画默认会在程序运行后自动执行，为便于控制，将其running属性设为false改为手动开启动画。因为SequentialAnimation是应用在x属性上的，所以在组中的独立动画也都会自动应用在x属性上。
- (b) SequentialAnimation{…}:因这个SequentialAnimation并未定义在任何属性上，故其中的各子动画元素必须以target和property分别指明要应用到的目标元素和属性，也可以使用Animator动画（在这种情况下只须给出应用的目标元素即可）。动画组可以嵌套，本例就是一个典型的嵌套动画，这个串行动画由两个ParallelAnimation动画及它们之间的PauseAnimation组成。
- (c) ParallelAnimation{...}:并行动画组，其中各子动画元素同时运行，本例包含4个独立的子动画，即ScaleAnimator (使照片尺寸变大）、OpacityAnimator (照片由隐到显）、RotationAnimator (照片旋转角度）、NumberAnimation (照片位置从上往下）。它们并行地执行，于是产生出照片旋转着下落的视觉效果。
(4) 编写主程序
打开“main.qml”文件，编写代码如下：
import QtQuick 2.12
import QtQuick.Window 2.12
Window {
width: 660
height: 330
visible: true
title: qsTr("ComplexAnimation")
Rectangle {
width: 360
height: 360
anchors.fill: parent
AnimateObj { } //使用组件
}
}一旦独立的动画被放入SequentialAnimation或ParallelAnimation中，它们就不能再独立开启或停止。串行和并行动画都必须作为一个组进行开启和停止。
————————————————
觉得有用的话请关注点赞，谢谢您的支持！
对于本系列文章相关示例完整代码有需要的朋友，可关注并在评论区留言！
