qml NumberAnimation详解-CSDN博客

本文链接：https://blog.csdn.net/ckg3824278/article/details/145036586

1. 概述

NumberAnimation 是 QML 中用于对数值进行动画变化的类。它可以使某个数字在指定的时间内平滑地从一个值过渡到另一个值，常用于数字、属性值等数值类型的动画效果。NumberAnimation 通常与 PropertyAnimation 一起使用，通过指定属性来控制动画的表现。

在 QML 中，NumberAnimation 常用于如调整控件位置、大小、透明度等数值属性，或者可以用来做渐变动画、进度条等效果。

主要功能：

为数值属性提供动画效果。
支持起始值、结束值、持续时间、缓动函数等设置。
支持暂停、恢复、结束、跳过等操作。

2. 重要属性

`from`

类型：real
描述：定义动画的起始值。如果没有定义此属性，动画会从当前属性的值开始。

`to`

类型：real
描述：定义动画的结束值。该值表示动画结束时目标属性的最终数值。

`duration`

类型：int
描述：定义动画持续的时间（单位：毫秒）。该属性决定了动画的速度和流畅度。

`easing`

类型：Easing.Type
描述：定义动画的缓动函数，控制动画在运动过程中加速、减速的方式。常用的缓动函数有线性、加速、减速等。

`loopCount`

类型：int
描述：控制动画的循环次数。默认为 1，表示动画会播放一次。如果设置为 -1，表示动画会无限循环。

`running`

类型：bool
描述：表示动画是否正在运行。如果动画正在运行，属性值为 true，否则为 false。可以通过设置此属性来控制动画的启动和暂停。

`direction`

类型：Animation.Direction
描述：控制动画播放的方向。可以选择正向播放、反向播放等。

3. 重要方法

`start()`

描述：启动动画。调用此方法会开始动画的播放。

`pause()`

描述：暂停动画。如果动画正在播放，调用此方法会暂停动画，并且可以在之后通过 start() 方法恢复播放。

`stop()`

描述：停止动画。调用此方法后，动画会停止并且动画的属性不会再变化。

`resume()`

描述：恢复动画的播放。如果动画处于暂停状态，调用此方法会从暂停的位置继续播放。

`update(currentTime)`

描述：通过调用此方法，可以让动画更新到当前的时间。

4. 重要信号

`runningChanged`

参数：running（布尔值，表示动画是否正在运行）
描述：当 running 属性改变时触发。例如，在动画开始、暂停或停止时，runningChanged 信号会被触发。

`finished`

描述：当动画完成播放时，触发此信号。这个信号可以用来触发下一步的操作或其他动画。

`paused`

描述：当动画被暂停时，触发此信号。可以通过监听此信号来做一些自定义操作，如显示暂停图标等。

5. 常用枚举类型

`Easing.Type`

描述：定义了多种缓动函数类型，用于控制动画的加速或减速曲线。
常用值：
- Linear: 线性动画，匀速变化。
- InQuad: 二次加速，开始慢，结束快。
- OutQuad: 二次减速，开始快，结束慢。
- InOutQuad: 二次加速减速，先慢后快再慢。
- InBounce: 弹跳效果，开始时逐渐加速。
- OutBounce: 弹跳效果，结束时逐渐减速。

`Animation.Direction`

描述：指定动画的播放方向。
常用值：
- Forward: 正向播放动画。
- Backward: 反向播放动画。
- Alternate: 交替播放动画，第一次播放正向，第二次播放反向。

import QtQuick 2.14
import QtQuick.Window 2.12
import QtQuick.Controls 2.14

Window {
    visible: true
    width: 640
    height: 480
    title: "NumberAnimation 示例"

    Rectangle {
        id: rect
        width: 100
        height: 100
        color: "red"
        x: 50
        y: 50

        NumberAnimation on x {
            id: xAnimation
            from: 50
            to: 540
            duration: 2000
            loops: Animation.Infinite
            easing.type: Easing.InOutQuad

            onStarted: console.log("动画开始")
            onStopped: console.log("动画停止")
            onFinished: console.log("动画完成")
        }

        MouseArea {
            anchors.fill: parent
            onClicked: {
                if (xAnimation.running) {
                    xAnimation.pause()
                } else {
                    xAnimation.resume()
                }
            }
        }
    }

    Rectangle {
        id: controlRect
        width: 150
        height: 50
        color: "blue"
        anchors.bottom: parent.bottom
        anchors.horizontalCenter: parent.horizontalCenter

        Text {
            text: "点击暂停/恢复动画"
            anchors.centerIn: parent
            color: "white"
        }

        MouseArea {
            anchors.fill: parent
            onClicked: {
                if (xAnimation.running) {
                    xAnimation.stop()
                } else {
                    xAnimation.start()
                }
            }
        }
    }
}