QML 属性动画、行为动画与预定义动画

news2025/7/14 7:34:18

引言

QML动画系统为界面元素提供了流畅的过渡效果。本文通过三个示例，结合属性动画(PropertyAnimation)、行为动画(Behavior)，展示如何使用QML动画实现动态效果。

本文使用的动画属性

属性	适用对象	说明
target	Animation	指定动画目标对象
properties	PropertyAnimation	指定要动画化的属性列表
duration	Animation	动画持续时间（毫秒）
easing.type	Animation	动画缓动曲线类型
running	Animation	控制动画运行状态
onStopped	Animation	动画停止时触发的信号

工程结构

qml_animation/
├── PropertyAnimationDemo.qml  # 属性动画示例
├── BehaviorAnimation.qml      # 行为动画示例
├── PredefinedAnimation.qml    # 预定义动画示例
├── images/
│   ├── huaji.gif              # 滑稽表情动画资源
│   └── rotation.gif           # 旋转箭头资源
└── main.qml                   # 主入口文件

示例解析

示例1：属性动画应用

PropertyAnimationDemo.qml

import QtQuick
import QtQuick.Controls

Rectangle {
    id: root
    width: 400
    height: 400

    AnimatedImage {
        id: img
        source: "qrc:/images/huaji.gif"
        x: 0
        y: 150
        width: 100
        height: 100

        // 属性动画
        PropertyAnimation on x {
            id: propAnim
            to: 300
            duration: 500
            running: false

            onStopped: {
                to = to===300 ? 0 : 300
            }
        }
    }

    Button {
        text: "启动属性动画"
        anchors.bottom: parent.bottom
        onClicked: {
            if (propAnim.running) return;
            propAnim.start();
        }
    }
}

代码说明：

通过PropertyAnimation on x声明x坐标属性动画
设置动画终点值to和持续时间duration
按钮点击触发动画启动，防止重复触发
动画停止时切换终点值实现往复运动

运行效果：

请添加图片描述

初始位置：图片位于左侧
点击按钮后：图片在500ms内平滑移动到右侧
再次点击：图片返回左侧位置，重新开始从左至右的运动

示例2：行为动画实现

BehaviorAnimation.qml

import QtQuick
import QtQuick.Controls

Rectangle {
    width: 400
    height: 400

    AnimatedImage {
        id: behaviorImg
        source: "qrc:/images/huaji.gif"
        x: 150
        y: 150
        width: 100
        height: 100

        // 默认行为动画
        Behavior on x {
            NumberAnimation {
                duration: 500
                easing.type: Easing.OutBounce
            }
        }
    }

    Row {
        anchors.bottom: parent.bottom
        spacing: 10
        Button {
            text: "左移50"
            onClicked: behaviorImg.x -= 50
        }

        Button {
            text: "右移50"
            anchors.bottom: parent.bottom
            onClicked: behaviorImg.x += 50
        }
    }
}

代码说明：

Behavior on x声明x坐标的默认动画行为
NumberAnimation用于实现数值动画
OutBounce缓动效果用于实现弹性动画
按钮直接修改x值，同时会触发Behavior中的NumberAnimation动画。

运行效果：

请添加图片描述

点击"左移"按钮：表情包向左侧移动50（带弹跳效果）
点击"右移"按钮：表情包向右侧移动50（带弹跳效果）

示例3：预定义动画

PredefinedAnimation.qml

import QtQuick
import QtQuick.Controls

Rectangle {
    width: 400
    height: 400

    AnimatedImage {
        id: img
        source: "qrc:/images/rotation.gif"
        x: 150
        y: 150
        width: 150
        height: 148

        // 预定义动画
        NumberAnimation {
            id: predefAnim
            target: img
            properties: "rotation"
            to: 360
            duration: 500

            onStopped: {
                to = to===360 ? 0 : 360
            }
        }
    }

    Button {
        text: "启动预定义动画"
        anchors.bottom: parent.bottom
        onClicked: {
            if (predefAnim.running) return;
            predefAnim.start();
        }
    }
}

代码说明：