【Qt6 QML Book 基础】10：动画元素 2（附完整可运行代码）

引言

在 QML 开发中，单一属性的动画往往难以满足复杂交互需求。分组动画通过组合多个动画，实现了多维度、多阶段的动态效果，是构建专业级交互动画的核心技术。本文将深入解析 并行动画（ParallelAnimation）、顺序动画（SequentialAnimation） 和 嵌套动画 的底层逻辑与实战技巧，结合足球抛物线运动、UFO 复合移动等案例，演示如何通过动画分组实现物理模拟、流程控制和视觉特效，助力开发者掌握动画系统的高阶应用。

一、运行效果图

1.1 并行动画：UFO 双轴同步移动

• 交互逻辑：
  1. UFO 从左下角（x=20，底部）出发，同时向顶部（y=20）和右侧（x=160）移动；
  2. 点击 UFO 触发 anim.restart()，动画重置并重新开始；
  3. 全程耗时 3 秒，双轴动画同步结束。
• 技术亮点：
  • 两个 NumberAnimation 并行运行，共享父级 duration；
  • 通过 ParallelAnimation 实现多属性同步变化，简化代码逻辑。

1.2 顺序动画：火箭分段飞行        

• 阶段分解：
  1. 上升阶段（0-1.8 秒，60% 时长）：火箭垂直升至顶部（y=20），采用线性缓动；
  2. 水平阶段（1.8-3 秒，40% 时长）：火箭向右移动至 x=400，衔接流畅。
• 关键特性：
  • 子动画按声明顺序执行，前一动画完成后自动启动下一动画；
  • 通过 duration 比例分配实现时间轴控制，适合分步操作场景。

1.3 嵌套动画：足球复合运动