Qt编写自定义控件二动画按钮

    现在的web发展越来越快，很多流行的布局样式，都是从web开始的，写惯了Qt widgets 项目，很多时候想改进一下现有的人机交互，尤其是在现有的按钮上加一些动画的效果，例如鼠标移上去变大，移开还原。

    Qt编写自定义控件还是非常方便和非常强大的，数量掌握Qpainter的各种绘制，自定义任意控件几乎都不是难题，只有想不到，没有做不到。

贴一张个人认为做的比较炫的UI界面：

如果工控项目的界面能够做到这种程序，应该可以让人眼前一亮。

 

运行效果图：

 

核心代码：

void AnimationButton::paintEvent(QPaintEvent *){    if (image.isEmpty()) {        return;    }     QPainterpainter(this);    painter.setRenderHint(QPainter::Antialiasing);     QPixmap pix(image);    pix =pix.scaled(targetWidth, targetHeight, Qt::KeepAspectRatio,Qt::SmoothTransformation);     if (enter || leave) {        int pixX =rect().center().x() - targetWidth / 2;        int pixY =rect().center().y() - targetHeight / 2 - 10;        QPoint point(pixX,pixY);        painter.drawPixmap(point,pix);        painter.drawText(QRectF(0,height() - 20, width(), 20), Qt::AlignCenter, text);    }}

 

完整代码：

animationbutton.h

#ifndef ANIMATIONBUTTON_H#define ANIMATIONBUTTON_H /** * 作者:feiyangqingyun(QQ:517216493)2016-10-22 * 1:可设置显示的图像和底部的文字 */ #include <QWidget>#include <QVariant> class QPropertyAnimation; class AnimationButton : public QWidget{    Q_OBJECTpublic:    explicitAnimationButton(QWidget *parent = 0);    ~AnimationButton(); protected:    voidenterEvent(QEvent *);    voidleaveEvent(QEvent *);    voidpaintEvent(QPaintEvent *); private:    bool enter;                         //是否进入    bool leave;                         //是否离开    int pixWidth;                       //图片宽度    int pixHeight;                      //图片高度    int oldWidth;                       //图片旧宽度    int oldHeight;                      //图片旧高度     QPropertyAnimation*enterAnimation; //进入动画    QPropertyAnimation*leaveAnimation; //离开动画     int targetWidth;                    //目标宽度    int targetHeight;                   //目标高度    QString text;                       //显示文字    QString image;                      //图像路径 private slots:    voidenterImageChanged(QVariant index);    voidleaveImageChanged(QVariant index); public slots:    //设置显示的文字    void setText(QStringtext);    //设置显示的图像    void setImage(QStringimage);}; #endif // ANIMATIONBUTTON_H

switchbutton.cpp

#include "animationbutton.h"#include "qpainter.h"#include "qpropertyanimation.h"#include "qdebug.h" AnimationButton::AnimationButton(QWidget *parent) :QWidget(parent){    enter = true;    leave = false;    pixWidth = 0;    pixHeight = 0;    oldWidth = 0;    oldHeight = 0;     enterAnimation = newQPropertyAnimation(this, "");    enterAnimation->setStartValue(0);    enterAnimation->setEndValue(5);    enterAnimation->setDuration(200);    connect(enterAnimation,SIGNAL(valueChanged(QVariant)), this, SLOT(enterImageChanged(QVariant)));     leaveAnimation = newQPropertyAnimation(this, "");    leaveAnimation->setStartValue(0);    leaveAnimation->setEndValue(5);    leaveAnimation->setDuration(200);    connect(leaveAnimation,SIGNAL(valueChanged(QVariant)), this, SLOT(leaveImageChanged(QVariant)));} AnimationButton::~AnimationButton(){    delete enterAnimation;    delete leaveAnimation;} void AnimationButton::enterEvent(QEvent *){    enter = true;    leave = false;    pixWidth = pixWidth -25;    pixHeight = pixHeight- 25;    enterAnimation->start();} void AnimationButton::leaveEvent(QEvent *){    enter = false;    leave = true;    pixWidth = oldWidth;    pixHeight = oldHeight;    leaveAnimation->start();} void AnimationButton::paintEvent(QPaintEvent *){    if (image.isEmpty()) {        return;    }     QPainterpainter(this);    painter.setRenderHint(QPainter::Antialiasing);     QPixmap pix(image);    pix =pix.scaled(targetWidth, targetHeight, Qt::KeepAspectRatio,Qt::SmoothTransformation);     if (enter || leave) {        int pixX =rect().center().x() - targetWidth / 2;        int pixY =rect().center().y() - targetHeight / 2 - 10;        QPoint point(pixX,pixY);        painter.drawPixmap(point,pix);        painter.drawText(QRectF(0,height() - 20, width(), 20), Qt::AlignCenter, text);    }} void AnimationButton::enterImageChanged(QVariant index){    int i = index.toInt();    targetWidth = pixWidth+ i * 5;    targetHeight =pixHeight + i * 5;    update();} void AnimationButton::leaveImageChanged(QVariant index){    int i = index.toInt();    targetWidth = pixWidth- i * 5;    targetHeight =pixWidth - i * 5;    update();} void AnimationButton::setImage(QString image){    this->image =image;    QPixmap pix(image);    pixWidth =pix.width();    pixHeight =pix.height();    oldWidth = pixWidth;    oldHeight = pixHeight;    targetWidth = pixWidth- 25;    targetHeight =pixHeight - 25;    update();} void AnimationButton::setText(QString text){    this->text = text;    update();}

此自定义控件集成在QFramework中。

自定义控件可执行文件下载：http://pan.baidu.com/s/1i5iCfzv

 

QFramework简介：

QFramework是一套通用的Qt程序开发框架，集成主界面布局、各种自定义控件、数据库处理、excel极速导出、数据打印、串口通信、网络通信、协议解析、全局热键、邮件发送，短信发送，百度地图调用、ffmpeg+vlc处理等功能，将常用的功能封装成类库，提供统一直观的调用接口，方便使用者使用，对应封装的库都有对应的demo程序。

 

QFramework基本功能：

1：支持从4.7.0到5.7.0的任何Qt版本，不受版本限制。用了此框架，不会再有Qt版本不同而引起的程序编译通不过的烦恼。

2：极速导出数据到excel，支持表格数据或者查询的数据，不依赖任何组件，支持任何excel、wps等表格软件版本，导出10万行数据8个字段只需要3秒完成。对导出的表格样式可自定义主标题和副标题，可对导出的数据按照指定条件红色突出显示。

3：数据导出到pdf及打印功能，支持表格数据或者查询的数据，支持横向纵向打印，自动分页。

4：数据分页dbapi类，只需传入表格对象，表名，翻页按钮即可。无需再写重复的方法处理翻页。

5：各种自定义控件，例如开关按钮、发光按钮，仪表盘控件、音量控件、温湿度控件、仪表仪器类控件等。

6：全新超级中英双拼输入法，非常适合触摸设备。

7：全局热键处理。

8：串口热敏打印机打印。

9：qcustomplot 2D图形曲线绘制（含鼠标数据跟踪）。

10：多线程邮件发送，支持多个接收邮箱。

11：多线程短信发送，支持多个接收号码及长短信。

12：Qffmpeg+Qvlc视频处理。

13：取字模，字符转LED数据处理。

14：全局日志输出类 applog，可动态挂载和卸载。

15：全局程序控制类 appkey，可控制程序的使用时间、运行时间、设备数量限制等。

16：封装百度地图调用接口，支持设备标注、路线查询、位置显示等。

17：自动清理程序早期数据类 cleanapi，传入要清理的数据库表名，执行间隔，保留的最大记录数即可。这样保证了整个系统存储的都是最新的数据。

18：NTP校时服务程序。

19：全局截图处理，可以很方便的直接在ARM上对程序进行截图。

20：程序存活检测功能 applive，通过udp通信实时发送心跳命令，这样可以保证程序7*24小时运行，在ARM上可采用appdog看门狗程序。

21：已运行时间+当前时间+实时CPU使用率+实时内存使用率等。

22：自定义程序主界面底部信息。

23：Echart图表的交互使用。