QML开发：动画元素

一、动画元素的概述

  在 QML 中，动画（Animation）元素用来让对象的属性随时间平滑变化。它们不仅能提升界面观感，还能直观地表达状态变化。QML 动画系统是基于 Qt Quick Animation Framework 的，核心思想是驱动属性值在一段时间内变化，并支持缓动曲线、循环播放、并行或顺序执行等控制。

二、PropertyAnimation（属性动画）

2.1 什么是 PropertyAnimation？

PropertyAnimation 用来让对象的任意属性在一段时间内从一个值平滑变化到另一个值。

• 它是通用的属性动画，支持数值、颜色、坐标、尺寸等类型。
• NumberAnimation、ColorAnimation 等就是它的子类，它们对特定类型做了简化。
• 适合做“单属性变化”的动画，但目标属性必须是可写的（Property 不是 readonly）。

继承结构：

Animation└─ PropertyAnimation├─ NumberAnimation├─ ColorAnimation└─ RotationAnimation

2.2 基本语法

PropertyAnimation {target: 对象IDproperty: "属性名"from: 起始值to: 结束值duration: 持续时间（毫秒）easing.type: 缓动类型
}

常用属性说明：

• target：动画作用的对象
• targets：动画作用的多个对象（数组）
• property：要修改的属性名（字符串）
• from：动画起始值（可省略，默认取当前属性值）
• to：动画结束值
• duration：动画时间（毫秒）
• easing.type：缓动曲线（如 Easing.OutBounce）
• loops：循环次数，Animation.Infinite 表示无限循环
• running：是否正在运行

2.3 基本示例

单次执行：

Rectangle {width: 300; height: 200; color: "lightgray"Rectangle {id: rectwidth: 50; height: 50; color: "red"}MouseArea {anchors.fill: parentonClicked: anim.start()}PropertyAnimation {id: animtarget: rectproperty: "x"from: 0to: 200duration: 1000easing.type: Easing.OutBounce}
}

无限循环动画：

Rectangle {width: 300; height: 200; color: "lightyellow"Rectangle {id: rectwidth: 50; height: 50; color: "blue"}PropertyAnimation {id: loopAnimtarget: rectproperty: "x"from: 0to: 200duration: 1000loops: Animation.Infiniteeasing.type: Easing.InOutQuadrunning: true // 自动开始}
}

同时作用多个对象：

Rectangle {width: 300; height: 200; color: "lightblue"Rectangle { id: r1; width: 30; height: 30; color: "red" }Rectangle { id: r2; width: 30; height: 30; color: "green"; y: 50 }MouseArea {anchors.fill: parentonClicked: anim.start()}PropertyAnimation {id: animtargets: [r1, r2]property: "x"from: 0to: 250duration: 800}
}

结合 Behavior 自动播放：

Rectangle {width: 300; height: 200; color: "lightgray"Rectangle {id: rectwidth: 50; height: 50; color: "orange"Behavior on x {PropertyAnimation { duration: 600; easing.type: Easing.InOutQuad }}}MouseArea {anchors.fill: parentonClicked: rect.x = rect.x === 0 ? 200 : 0}
}

三、NumberAnimation（数字动画）

3.1 什么是 NumberAnimation？

NumberAnimation 是 PropertyAnimation 的特化版本，专门针对数值类型属性（int、real 等）做动画。

它的特点是：

• 语法简洁，不用指定动画类型就能自动识别为数字插值。
• 常用于 x、y、width、height、opacity、rotation 等属性。
• 支持缓动曲线、循环、自动开始等功能。

继承关系：

Animation└─ PropertyAnimation└─ NumberAnimation

3.2 基本语法

NumberAnimation {target: 对象IDproperty: "属性名"from: 起始值to: 结束值duration: 持续时间（毫秒）easing.type: 缓动曲线类型
}

常用属性：

• target 要做动画的对象
• targets 多个对象（数组形式）
• property 动画作用的属性名
• from 起始值（可省略，默认取当前属性值）
• to 结束值
• duration 动画持续时间（毫秒）
• easing.type 缓动曲线（Easing.OutBounce 等）
• loops 循环次数（Animation.Infinite 表示无限循环）
• running 是否运行
• alwaysRunToEnd 如果动画被打断，是否直接跳到结束值

3.2 常用缓动曲线

• Easing.Linear：匀速
• Easing.InQuad：开始慢加速
• Easing.OutQuad：结束慢减速
• Easing.InOutQuad：两头慢中间快
• Easing.OutBounce：回弹效果
• Easing.InOutElastic：弹性效果

3.3 基本示例

点击按钮执行一次：

Rectangle {width: 300; height: 200; color: "lightgray"Rectangle {id: rectwidth: 50; height: 50; color: "red"}MouseArea {anchors.fill: parentonClicked: anim.start()}NumberAnimation {id: animtarget: rectproperty: "x"from: 0to: 200duration: 1000easing.type: Easing.OutBounce}
}

无限循环动画：

Rectangle {width: 300; height: 200; color: "lightyellow"Rectangle {id: rectwidth: 50; height: 50; color: "blue"}NumberAnimation {target: rectproperty: "x"from: 0to: 200duration: 800loops: Animation.Infiniterunning: trueeasing.type: Easing.InOutQuad}
}

同时作用多个对象：

Rectangle {width: 300; height: 200; color: "lightblue"Rectangle { id: r1; width: 30; height: 30; color: "red" }Rectangle { id: r2; width: 30; height: 30; color: "green"; y: 50 }MouseArea {anchors.fill: parentonClicked: anim.start()}NumberAnimation {id: animtargets: [r1, r2]property: "x"from: 0to: 250duration: 800}
}

Behavior 自动动画：

Rectangle {width: 300; height: 200; color: "lightgray"Rectangle {id: rectwidth: 50; height: 50; color: "orange"Behavior on x {NumberAnimation { duration: 600; easing.type: Easing.InOutQuad }}}MouseArea {anchors.fill: parentonClicked: rect.x = rect.x === 0 ? 200 : 0}
}