Qt属性动画仿真QPropertyAnimation的使用

一、QPropertyAnimation的基本使用

1、常用接口函数

• setTargetObject：设置仿真对象
• setPropertyName：设置仿真属性的名称，
• setDuration：设置仿真持续的时间
• setStartValue：设置初始值
• setEndValue：设置结束值
• start：开始仿真
• currentValue：返回当前值
• setKeyValueAt：设置关键点的值
• valueChanged：只要仿真追踪的值发生变化，就发送该信号

2、如让一个矩形进行运动的仿真

头文件.h

#pragma once
#include <QtWidgets/QWidget>
#include "ui_QtTimeSet.h"
#include <QLabel>
#include<QPropertyAnimation>

class QtTimeSet : public QWidget
{
    Q_OBJECT

public:
    QtTimeSet(QWidget *parent = Q_NULLPTR);

protected slots:
    /// <SUMMARY>
    /// 点击按钮 开始动画运动
    /// </SUMMARY>
    void DoStart();

private:
    Ui::QtTimeSetClass ui;

    QPropertyAnimation          *animation;
    QLabel                      *label01;
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

对应.cpp文件

#include "QtTimeSet.h"

#include <QRect>
#include <QFrame>

QtTimeSet::QtTimeSet(QWidget *parent)
    : QWidget(parent)
{
    ui.setupUi(this);

    label01 = new QLabel(this);
    label01->setGeometry(0, 0, 300, 100);
    label01->setFrameShape(QFrame::Box);
    label01->setStyleSheet("background-color:blue");

	//设置仿真对象为label01，设置该对象的几何属性为仿真变量
    animation = new QPropertyAnimation(label01, "geometry");
    animation->setDuration(1000); //动画持续的时间(毫秒)
    animation->setStartValue(QRect(0, 0, 300, 100)); //动画属性开始时的值
    animation->setEndValue(QRect(300, 300, 300, 100)); //动画属性结束时的值

    connect(ui.btn01, &QPushButton::clicked, this, &QtTimeSet::DoStart);
}

void QtTimeSet::DoStart()
{
    animation->start();
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

结果如下，点击 PushButton01矩形开始按照设定的时间间隔进行移动

---

二、对自定义的变量进行动画仿真

由于QPropertyAnimation并不是对所有的变量都支持动画，如果是自定义的变量就需要自行处理，才能够让Qt对该变量进行追踪和仿真。

1、对自定义的整型变量dis值进行追踪仿真显示

• code如下

/********** 头文件 QAnimationTest.h ***********/
#pragma once

#include <QtWidgets/QWidget>
#include "ui_QAnimationTest.h"
#include <QPropertyAnimation>

class QAnimationTest : public QWidget
{
    Q_OBJECT

    //首先要通过Q_PROPERTY宏添加自己自定义的属性来让QPropertyAnimation追踪到，
    //在此该属性为整型变量 dis
    Q_PROPERTY(int dis READ getDistance WRITE setDistance)

public:
    QAnimationTest(QWidget *parent = Q_NULLPTR);   
    int getDistance() const;           //获取移动的距离
    void setDistance(const int &dis0); //设置移动的距离

protected slots:
    void StartAnimate();               //开始仿真槽函数
    void ShowNum(const QVariant &val); //在QLabel中显示仿真属性的当前值   

private:
    Ui::QAnimationTestClass   ui;
    QPropertyAnimation       *animation;
    int                       moveDis;
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

/********** 主程序 QAnimationTest.cpp ***********/
#include "QAnimationTest.h"
#include <QPushButton>

QAnimationTest::QAnimationTest(QWidget *parent)
    : QWidget(parent)
{
    ui.setupUi(this);
    ui.labelShowNum->setStyleSheet("color:red;font-size:60px;");
    moveDis = 60;
    
    animation = new QPropertyAnimation;
    animation->setTargetObject(this);
    animation->setPropertyName("dis");  //第二个参数的类型一定要和声明的参数dis一样，否则会失败
    animation->setDuration(5000);
    
    connect(ui.StartButton, &QPushButton::clicked, this, &QAnimationTest::StartAnimate);
    connect(animation, &QVariantAnimation::valueChanged, this, &QAnimationTest::ShowNum);
}

void QAnimationTest::StartAnimate()
{
    if (moveDis == 10)
    {
        moveDis = 60;
    }
    animation->setStartValue(moveDis);
    animation->setEndValue(10);
    animation->start();
}

void QAnimationTest::ShowNum(const QVariant &val)
{
    int textNum = val.toInt();
    ui.labelShowNum->setText(QString::number(textNum));
}

int QAnimationTest::getDistance() const
{
    return moveDis;
}

void QAnimationTest::setDistance(const int &dis)
{
    moveDis = dis;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

• 运行结果如下：点击Start按钮即开始进行动画仿真。
  

2、总结分析

1. 不同的写法：

//如下的代码也可以在创建的时候指定好目标仿真的目标对象和仿真属性的名称
	animation = new QPropertyAnimation;
    animation->setTargetObject(this);
    animation->setPropertyName("dis");
    
//另一种写法：
animation = new QPropertyAnimation(this,"dis");
1
2
3
4
5
6
7

2. 可以通过setKeyValueAt来在指定的位置设置指定的值，从而便于对仿真值进行非线性控制，如在整个仿真过程中：

	//设置设置初始值为50，
    animation->setKeyValueAt(0, 50);
    //仿真进行到中间时刻时，值变化到10
    animation->setKeyValueAt(0.5, 10);
    //然后从10开始到结束仿真时，值变为60
    animation->setKeyValueAt(1, 60);
1
2
3
4
5
6

---

三、通过自定义的变量来控制一些控件的UI属性

1、Code头文件如上不变，.cpp文件如下

/***** .cpp ********/
#include "QAnimationTest.h"
#include <QPushButton>

QAnimationTest::QAnimationTest(QWidget *parent)
    : QWidget(parent)
{
    ui.setupUi(this);

    ui.labelShowNum->setStyleSheet("color:red;font-size:60px;");

    moveDis = 255;

    //第二个参数的类型一定要和声明的参数dis一样，否则会失败
    animation = new QPropertyAnimation(this,"dis");
    animation->setDuration(8000);
    animation->setStartValue(moveDis);
    animation->setEndValue(10);


    connect(ui.StartButton, &QPushButton::clicked, this, &QAnimationTest::StartAnimate);
    connect(animation, &QVariantAnimation::valueChanged, this, &QAnimationTest::ShowNum);
  
}

void QAnimationTest::StartAnimate()
{
    animation->start();
}

void QAnimationTest::ShowNum(const QVariant &val)
{
    int textNum = val.toInt();
    ui.labelShowNum->setText(QString::number(textNum));
    ui.labelShowNum->setStyleSheet(QString("background-color:rgba(200,100,%1,0.7)").arg(textNum));
}

int QAnimationTest::getDistance() const
{
    return moveDis;
}

void QAnimationTest::setDistance(const int &dis)
{
    moveDis = dis;
}


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

2、运行效果如下

---

参考资料
[1] Qt动画效果的实现，QPropertyAnimation
[2] Qt 之 QPropertyAnimation