第10章：动画与行为

动画是提升用户界面交互体验的核心技术。在QML中，动画系统强大而灵活，允许开发者以声明式的方式创建平滑、生动的视觉效果。本章将深入讲解QML中几种核心的动画类型和行为控制机制，帮助你掌握界面动态效果的实现。

一、基础动画类型

1. PropertyAnimation：通用属性动画

它是QML动画的“万能工具”，可以对任何属性值的变化进行平滑过渡，不管是位置、大小还是透明度，只要是对象属性，都能通过它实现动态变化。

常用属性包括：target指定动画目标对象，property定义要动画的属性名，to/from设置目标值与起始值，duration控制动画持续时长（单位毫秒），easing.type选择缓动曲线让动画更自然。

示例代码：

import QtQuick 2.15

Rectangle {
    width: 100; height: 100
    color: "lightblue"

    PropertyAnimation on x {
        to: 300
        duration: 1000
        running: true
    }
}

2. NumberAnimation：数值专属动画

作为PropertyAnimation的特化版本，它专门针对数值类型属性优化，效率更高，支持整数和浮点数，是处理x/y坐标、旋转角度、透明度等数值属性的首选。

示例代码：

Rectangle {
    id: rect
    width: 50; height: 50
    color: "orange"

    MouseArea {
        anchors.fill: parent
        onClicked: numAnim.start()
    }

    NumberAnimation {
        id: numAnim
        target: rect
        property: "rotation"
        from: 0
        to: 360
        duration: 2000
    }
}

3. ColorAnimation：颜色过渡动画

专门用于颜色属性的平滑过渡，支持所有颜色格式（如“red”、“#FF0000”、“rgb(255,0,0)”），能让颜色变化像呼吸一样自然，常用来做按钮 hover 效果或主题切换动画。

示例代码：

Rectangle {
    width: 200; height: 200
    color: "green"

    ColorAnimation on color {
        to: "yellow"
        duration: 3000
        loops: Animation.Infinite
        running: true
    }
}

二、行为控制：Behavior自动动画

Behavior元素相当于给属性装了个“自动动画开关”，当属性值发生变化时，会自动应用指定的动画效果，无需显式调用动画，既简化代码，又让动画逻辑与属性绑定，提升可维护性。

示例代码：

Rectangle {
    width: 100; height: 100
    color: "skyblue"

    Behavior on x {
        NumberAnimation { duration: 500; easing.type: Easing.OutBounce }
    }
    Behavior on y {
        NumberAnimation { duration: 500; easing.type: Easing.OutBack }
    }

    MouseArea {
        anchors.fill: parent
        onClicked: {
            parent.x = mouse.x - parent.width/2
            parent.y = mouse.y - parent.height/2
        }
    }
}

三、组合动画：打造复杂效果

1. SequentialAnimation：顺序动画

按顺序逐个执行子动画，就像排队完成任务，适合制作有先后逻辑的动画序列，比如先移动到指定位置，再执行旋转效果。

示例代码：

Rectangle {
    id: seqRect
    width: 80; height: 80
    color: "red"

    SequentialAnimation {
        id: seqAnim
        running: true

        NumberAnimation {
            target: seqRect
            property: "x"
            to: 400
            duration: 1000
        }
        NumberAnimation {
            target: seqRect
            property: "y"
            to: 300
            duration: 1000
        }
        RotationAnimation {
            target: seqRect
            to: 360
            duration: 1000
        }
    }
}

2. ParallelAnimation：并行动画

同时执行所有子动画，多个动画效果同步发力，比如让矩形边移动边变色，轻松打造丰富的复合视觉效果。

示例代码：

Rectangle {
    id: parRect
    width: 80; height: 80
    color: "purple"

    ParallelAnimation {
        id: parAnim
        running: true

        NumberAnimation {
            target: parRect
            property: "x"
            to: 400
            duration: 2000
        }
        NumberAnimation {
            target: parRect
            property: "y"
            to: 300
            duration: 2000
        }
        ColorAnimation {
            target: parRect
            property: "color"
            to: "cyan"
            duration: 2000
        }
    }
}

四、动画类型对比与选择

不同动画类型各有侧重，选择时可参考以下方向：

• PropertyAnimation：适用于通用属性变化（位置、大小、透明度等），灵活性最高，但处理数值属性时优先选NumberAnimation以提升性能；
• NumberAnimation：专为数值属性（x、y、旋转、透明度等）优化，效率更高，是数值动画的首选；
• ColorAnimation：仅用于颜色属性变化，能实现自然平滑的颜色过渡；
• Behavior：适合需要属性变化自动触发动画的场景，代码简洁但注意不要过度使用，避免意外动画；
• SequentialAnimation：用于按顺序执行多个动画，适合制作有流程的复杂序列；
• ParallelAnimation：用于同时执行多个动画，轻松打造复合视觉效果。
• 
  

五、综合实战示例

下面是一个结合多种动画类型的完整示例，点击界面任意位置，矩形会同时移动到目标点、随机变色，还会完成旋转动画，弹性缓动让效果更贴近真实物理运动：

import QtQuick 2.15

Item {
    width: 600; height: 400

    Rectangle {
        id: animatedBox
        width: 100; height: 100
        color: "#FF5722"
        radius: 10

        // 位置变化自动触发弹性动画
        Behavior on x {
            NumberAnimation {
                duration: 800
                easing.type: Easing.OutElastic
                easing.amplitude: 2.0
            }
        }
        Behavior on y {
            NumberAnimation {
                duration: 800
                easing.type: Easing.OutBack
            }
        }

        // 颜色变化自动触发过渡动画
        Behavior on color {
            ColorAnimation { duration: 500 }
        }

        // 点击触发的旋转顺序动画
        SequentialAnimation on rotation {
            id: spinAnim
            loops: 1
            running: false

            NumberAnimation {
                from: 0
                to: 360
                duration: 1000
                easing.type: Easing.InOutQuad
            }
            PauseAnimation { duration: 300 }
            NumberAnimation {
                from: 360
                to: 0
                duration: 500
            }
        }
    }

    MouseArea {
        anchors.fill: parent
        onClicked: {
            // 并行动画：移动+变色同步执行
            ParallelAnimation {
                NumberAnimation {
                    target: animatedBox
                    property: "x"
                    to: mouse.x - animatedBox.width/2
                    duration: 1000
                }
                NumberAnimation {
                    target: animatedBox
                    property: "y"
                    to: mouse.y - animatedBox.height/2
                    duration: 1000
                }
                ColorAnimation {
                    target: animatedBox
                    property: "color"
                    to: Qt.rgba(Math.random(), Math.random(), Math.random(), 1)
                    duration: 1000
                }
            }.start()

            // 启动旋转动画
            spinAnim.start()
        }
    }
}

最佳实践提示

1. 处理数值属性时，优先使用NumberAnimation代替PropertyAnimation，获得更优性能；
2. 合理选择缓动曲线（如OutBounce模拟弹球、OutBack模拟弹簧），让动画更自然生动；
3. 避免同时运行过多动画，可通过分组管理控制动画数量，防止界面卡顿；
4. 使用Behavior时注意属性变化的来源，避免触发意外的动画循环；
5. 设计复杂动画时，先梳理动画序列逻辑，再用顺序/并行动画组合实现。