QT上位机开发（动画效果）

【 声明：版权所有，欢迎转载，请勿用于商业用途。 联系信箱：feixiaoxing @163.com】

        不管是仿真，还是对真实环境的一比一模拟，动画都是非常好的一种呈现方式。目前在qt上面，实现动画主要有两种方法。一种，就是自己用定时器和canvas实现动画，这种情况比较适合复杂或者是定制类的动画；另外一种，qt本身也提供了各种各样的动画类，比如QPropertyAnimation，利用这些类同样可以实现动画的效果。今天，我们就用后面一种方法实现一下。

1、创建qt widget工程

        首先老规矩，还是需要创建一个qt widget工程。

2、修改头文件

        头文件部分，主要就是三件事情。第一，增加一个QPushButton变量，这个变量也是实现动画的主体；第二，增加一个QPropertyAnimation的变量，它也就是动画控制的方法；第三，增加一个按钮回调函数，在按钮回调函数中开启动动画。

#pragma once#include <QtWidgets/QMainWindow>
#include <QPushButton>
#include <QPropertyAnimation>
#include "ui_QtWidgetsApplication1.h"class QtWidgetsApplication1 : public QMainWindow
{Q_OBJECTpublic:QtWidgetsApplication1(QWidget *parent = nullptr);~QtWidgetsApplication1();private:Ui::QtWidgetsApplication1Class ui;private slots:void startAnimation();private:QPushButton *p_button;QPropertyAnimation *p_animation;
};

3、实现源文件

        整个源文件的内容不算复杂。最主要的部分，就是初始化QPushButton和QPropertyAnimation这两个变量。前者就是常规的创建方法。后者稍微复杂一点，关键是里面属性的设置，比如说起始位置、结束位置、动画时间，这些都需要一一设置。最后就是按钮的回调函数部分。

        整个动画效果是这样的，首先是界面上有一个按钮，单击按钮后，按钮本身就会发生移动。怎么移动，这都是由QPropertyAnimation来决定的。

#include "QtWidgetsApplication1.h"QtWidgetsApplication1::QtWidgetsApplication1(QWidget *parent): QMainWindow(parent)
{ui.setupUi(this);// 创建按钮p_button = new QPushButton("Click Me", this);p_button->setGeometry(100, 100, 100, 30);// 创建动画对象p_animation = new QPropertyAnimation(p_button, "pos");// 设置动画的起始和结束值p_animation->setStartValue(QPoint(100, 100));p_animation->setEndValue(QPoint(300, 300));// 设置动画的持续时间 1sp_animation->setDuration(1000); // 连接按钮的点击信号到槽函数connect(p_button, &QPushButton::clicked, this, &QtWidgetsApplication1::startAnimation);
}QtWidgetsApplication1::~QtWidgetsApplication1()
{delete p_button;delete p_animation;
}void QtWidgetsApplication1::startAnimation() {// 开始动画p_animation->start();
}

4、编译和测试

        编译和测试，相对而言就比较简单了。编译无误之后，直接单击按钮，确认按钮是否发生了移动。如果是，则代表达到了我们验证的效果。否则，需要回头重新debug确认一下。一开始的时候，按钮位于窗口的左上方，

        按钮单击后，按钮被移动到了窗口的右下方，效果就是这样的。