QML 动画控制、顺序动画与并行动画

引言

接上文：QML 属性动画、行为动画与预定义动画。本文继续通过QML示例，介绍两种动画（顺序动画SequentialAnimation和并行动画ParallelAnimation）如何使用，并附带完整的示例代码。

相关阅读

• ParallelAnimation官方文档
• SequentialAnimation官方文档

基础属性说明

属性	类型	说明
target	Object	动画作用的目标对象
property	string	需要动画化的属性名称
duration	int	动画持续时间（毫秒）
easing.type	enumeration	缓动曲线类型（如Easing.InOutQuad）
running	bool	控制动画运行状态

工程结构

qml_animation/
├── CMakeLists.txt
├── Main.qml          # 主界面
├── ControlledAnimation.qml      # 手动控制动画
├── SequentialAnimationDemo.qml  # 顺序动画示例
├── ParallelAnimationDemo.qml    # 并行动画示例
├── images.qrc        # 资源文件
└── main.cpp          # 程序入口

---

示例代码解析

示例1：手动控制动画（ControlledAnimation.qml）

import QtQuick
import QtQuick.ControlsRectangle {width: 400height: 400AnimatedImage {id: controlImgsource: "qrc:/images/huaji.gif"x: 0y: 150width: 100height: 100}NumberAnimation {id: controlledAnimtarget: controlImgproperty: "x"from: 0to: 300duration: 1500}Row {anchors.bottom: parent.bottomspacing: 10Button {text: "开始"onClicked: controlledAnim.start()}Button {text: "暂停"onClicked: controlledAnim.pause()}Button {text: "恢复"onClicked: controlledAnim.resume()}Button {text: "停止"onClicked: controlledAnim.stop()}Button {text: "重启"onClicked: controlledAnim.restart()}}
}

代码说明：

这段代码通过组合使用 QML 的各种元素和控件，实现了对一个表情包移动动画的控制功能，用户可以通过点击不同的按钮来控制表情包的移动动画的开始、暂停、恢复、停止和重启。

其中NumberAnimation用于控制表情包的水平移动。设置了动画的目标对象（target）为 controlImg（即前面定义的表情包动态图），要控制的属性（property）为 “x”（水平坐标）。动画的起始位置（from）为 0，结束位置（to）为 300 像素，动画持续时间（duration）为 1500 毫秒。

运行效果：

---

示例2：顺序动画（SequentialAnimationDemo.qml）

import QtQuick
import QtQuick.ControlsRectangle {width: 400height: 400SequentialAnimation {id: seqAnimationrunning: falseNumberAnimation { target: rect1; property: "rotation"; from: 0; to: 315; duration: 500 }NumberAnimation { target: rect2; property: "rotation"; from: 0; to: 315; duration: 500 }NumberAnimation { target: rect3; property: "rotation"; from: 0; to: 315; duration: 500 }}Row {spacing: 20anchors.centerIn: parentRectangle {id: rect1width: 80height: 80color: "pink"}Rectangle {id: rect2width: 80height: 80color: "cyan"}Rectangle {id: rect3width: 80height: 80color: "lime"}}Button {text: "启动动画"anchors.bottom: parent.bottomonClicked: {seqAnimation.start()}}
}

代码说明：

这段代码通过组合使用 QML 的各种元素和控件，实现了三个彩色矩形的旋转动画效果，并通过按钮来控制动画的启动。用户点击 “启动动画” 按钮后，三个矩形会按照预先定义的动画序列依次旋转。

SequentialAnimation用于定义一个动画序列，动画会按照添加的顺序依次执行。设置了动画序列的初始状态为不运行（running: false）。
定义了三个NumberAnimation元素，每个动画都控制一个矩形（rect1、rect2、rect3）的旋转属性（rotation），起始角度为 0，结束角度为 315 度，动画持续时间均为 500 毫秒。

运行效果：

---

示例3：并行动画（ParallelAnimationDemo.qml）

import QtQuick
import QtQuick.ControlsRectangle {width: 400height: 400ParallelAnimation {id: palAnimationrunning: falseNumberAnimation { target: rect1; property: "rotation"; from: 0; to: 315; duration: 500 }NumberAnimation { target: rect2; property: "rotation"; from: 0; to: 315; duration: 500 }NumberAnimation { target: rect3; property: "rotation"; from: 0; to: 315; duration: 500 }}Row {spacing: 20anchors.centerIn: parentRectangle {id: rect1width: 80height: 80color: "pink"}Rectangle {id: rect2width: 80height: 80color: "cyan"}Rectangle {id: rect3width: 80height: 80color: "lime"}}Button {text: "启动动画"anchors.bottom: parent.bottomonClicked: {palAnimation.start()}}
}

代码说明：

运行效果：

---

总结

通过本文中的三个示例，进行如下总结：

• 手动控制动画适合需要精确控制动画生命周期的场景
• 顺序动画适用于需要分步执行的动画序列
• 并行动画可提升多个动画元素的协同表现力

工程下载

Gitcode项目地址：GitCode -> QML 动画示例

在之前的项目上增加了3个示例，实现了一个主界面（main.qml），基于swipeview为容器，展示6个示例。