QML 动画基础

在 QML 中，动画和过渡是构建流畅用户界面的核心工具。以下内容将详细介绍相关概念、用法以及最佳实践，帮助掌握其核心机制。

---

一、QML 动画基础

QML 通过属性动画实现平滑的变化效果，常见的动画类型包括：

• PropertyAnimation：通用属性动画，支持任何可动画属性。
• NumberAnimation：专用于数值属性（如 width, opacity）。
• ColorAnimation：处理颜色过渡（如 color）。
• RotationAnimation：旋转角度动画（rotation）。
• Animator 类型（如 XAnimator, ScaleAnimator）利用硬件加速提升性能，适合复杂动画。

示例：基本属性动画

Rectangle {
    id: rect
    width: 100; height: 100
    color: "blue"

    PropertyAnimation {
        id: anim
        target: rect
        properties: "width,color"
        to: 200; "green"
        duration: 500
    }

    MouseArea {
        anchors.fill: parent