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

最新推荐文章于 2025-07-19 23:23:23 发布

原创

最新推荐文章于 2025-07-19 23:23:23 发布 · 1k 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#qt6 #qt6qml #qml6book #c++

引言

在 Qt Quick 开发中，动画是提升用户体验的关键要素。通过对属性变化的插值计算，动画可以实现平滑的视觉过渡，让界面交互更自然、更具吸引力。本文将结合《Qt6 QML Book》中的核心内容，深入解析 QML 动画的基础用法，包括简单动画实现、不同动画元素的特性以及缓动曲线的应用，并提供完整可运行代码示例。

一、运行效果图

1.1 简单动画

效果描述：点击背景后，绿色盒子从左侧平移至右侧，同时伴随 360 度旋转，两者动画同步执行，总时长 4 秒。
核心表现：x 坐标从初始值平滑过渡到目标值，rotation 属性从当前角度旋转至 360 度，形成动态视觉效果。

1.2 动画元素对比

三个盒子分别演示三种动画类型：
- 绿色盒子：使用 Animation on property，动画在元素加载后自动运行。
- 蓝色盒子：通过 Behavior on property，点击后触发属性变化并自动应用动画。
- 红色盒子：独立动画（Standalone Animation），需手动调用 start() 启动。
交互特性：点击背景可重置所有盒子位置，观察不同动画类型的触发机制和行为差异。

1.3 缓动曲线动画

核心交互：点击不同缓动按钮（如InOutBounce、InExpo），盒子在左右两侧之间以对应曲线风格移动，实时展示速度变化：
- Linear：匀速运动，速度始终一致（数学模型：f(t) = t）。
- InExpo：初始缓慢，后期加速（f(t) = 2^10*(t-1)），模拟 “渐入” 效果。
- OutBounce：快结束时弹性回弹，类似皮球落地反弹（内置物理模拟算法）。

二、简单动画

2.1 动画系统基础架构

QML 动画基于PropertyAnimation体系，核心原理是通过插值算法计算属性在时间轴上的中间值，实现平滑过渡。主要组件包括：

动画类型：NumberAnimation（数值）、RotationAnimation（旋转）、ColorAnimation（颜色）等，针对不同属性类型优化插值逻辑。
时间控制：duration（总时长，毫秒）、delay（延迟启动时间）、loops（循环次数，Animation.Infinite表示无限循环）。
状态绑定：通过running属性联动控制动画启停，支持与界面状态（如按钮点击、组件可见性）绑定。