Qt 自定义动画按钮（超酷炫）

整体的界面是 一个主 widget 套着3个 widget（微信,支付宝,银行卡）
点击widget时 出现一个dialog 的二维码

下面上代码

二维码窗口

// 二维码窗口
qrcodedialog.h 


#ifndef QRCODEDIALOG_H
#define QRCODEDIALOG_H

#include <QDialog>

namespace Ui {
class QRcodeDialog;
}

class QRcodeDialog : public QDialog
{
    Q_OBJECT

public:
    explicit QRcodeDialog(QWidget *parent = 0);
    ~QRcodeDialog();
protected:
    void mouseDoubleClickEvent(QMouseEvent *event);
    void paintEvent(QPaintEvent *event);
private:
    Ui::QRcodeDialog *ui;
};

#endif // QRCODEDIALOG_H

#include "qrcodedialog.h"
#include "ui_qrcodedialog.h"
#include <QMouseEvent>
#include <QPainter>
QRcodeDialog::QRcodeDialog(QWidget *parent) :
    QDialog(parent),
    ui(new Ui::QRcodeDialog)
{
    ui->setupUi(this);
    this->setWindowTitle("手机扫码");

}

QRcodeDialog::~QRcodeDialog()
{
    delete ui;
}

void QRcodeDialog::mouseDoubleClickEvent(QMouseEvent *event)
{
    this->hide();
}

void QRcodeDialog::paintEvent(QPaintEvent *event)
{
    QPainter paint(this);
    paint.setRenderHint(QPainter::Antialiasing);

    QPixmap img(":/QRcode.png");

    paint.drawPixmap(0,0,img.width(),img.height(),img);
}

动画按钮代码

#ifndef MYANIMATIONBUTTON_H
#define MYANIMATIONBUTTON_H

#include <QWidget>
#include "qrcodedialog.h"


class QPropertyAnimation;

class myAnimationButton : public QWidget
{
    Q_OBJECT

public:
    explicit myAnimationButton(QWidget *parent = 0);
    ~myAnimationButton();

    void enterImageChanged(QVariant value);
    void leaveImageChanged(QVariant value);

    void setImagePath(QString path);
    void setText(QString text){
        this->text = text;
    }
protected:
    void enterEvent(QEvent *event);
    void leaveEvent(QEvent *event);
    void paintEvent(QPaintEvent *event);
    void mousePressEvent(QMouseEvent *event);


private:

    int imageWidth;
    int imageHeight;

    int originalWidth;
    int originalHeight;

    int newWidth;
    int newHeight;


    QString imagePath;
    QString text;

    QPropertyAnimation* enterAnimation;
    QPropertyAnimation* leaveAnimation;

    QRcodeDialog* dialog;

};

#endif // MYANIMATIONBUTTON_H

#include "myanimationbutton.h"
#include <QPropertyAnimation>
#include <QPainter>
#include <QDebug>
#include <QMouseEvent>
myAnimationButton::myAnimationButton(QWidget *parent) :
    QWidget(parent)

{

    imageWidth = 0;
    imageHeight = 0;
    originalWidth = 0;
    originalHeight = 0;
    newWidth = 0;
    newHeight = 0;
    imagePath = "";


    enterAnimation = new QPropertyAnimation(this,"");
    enterAnimation->setStartValue(0);
    enterAnimation->setEndValue(25);
    enterAnimation->setDuration(200);
    connect(enterAnimation,&QPropertyAnimation::valueChanged,
            this,&myAnimationButton::enterImageChanged);

    leaveAnimation = new QPropertyAnimation(this,"");
    leaveAnimation->setStartValue(0);
    leaveAnimation->setEndValue(25);
    leaveAnimation->setDuration(200);
    connect(leaveAnimation,&QPropertyAnimation::valueChanged,
            this,&myAnimationButton::leaveImageChanged);

    dialog = new QRcodeDialog(this);
}

myAnimationButton::~myAnimationButton()
{

    delete enterAnimation;
    delete leaveAnimation;
}

void myAnimationButton::enterImageChanged(QVariant value)
{
    newWidth = imageWidth + value.toInt();
    newHeight = imageHeight + value.toInt();
    update();
}

void myAnimationButton::leaveImageChanged(QVariant value)
{
    newWidth = imageWidth - value.toInt();
    newHeight = imageHeight - value.toInt();
    update();
}

void myAnimationButton::setImagePath(QString path)
{
    imagePath = path;
    QPixmap img(path);
    imageWidth = img.width();
    imageHeight = img.height();
    originalWidth = imageWidth;
    originalHeight = imageHeight;
    newWidth = imageWidth - 25;
    newHeight = imageHeight - 25;
    update();
}

void myAnimationButton::enterEvent(QEvent *event)
{

    imageWidth = imageWidth - 25;
    imageHeight = imageHeight - 25;
    enterAnimation->start();
}

void myAnimationButton::leaveEvent(QEvent *event)
{

    imageWidth = originalWidth;
    imageHeight = originalHeight;
    leaveAnimation->start();
}

void myAnimationButton::paintEvent(QPaintEvent *event)
{
    if(imagePath.isEmpty())
        return;

    QPainter paint(this);
    paint.setRenderHint(QPainter::Antialiasing);

    QPixmap img(imagePath);
    img = img.scaled(newWidth,newHeight,Qt::IgnoreAspectRatio,
                     Qt::SmoothTransformation);

    int pixX = rect().center().x() - newWidth / 2;
    int pixY = rect().center().y() - newHeight / 2 - 10;
    QPoint point(pixX, pixY);
    paint.drawPixmap(point, img);
    paint.drawText(QRectF(0, height() - 20, width(), 20), Qt::AlignCenter, text);
}

void myAnimationButton::mousePressEvent(QMouseEvent *event)
{
    if(imagePath.isEmpty())
        return;

    QPixmap image(imagePath);
    if(image.rect().contains(event->pos()))
    {
        qDebug()<<"press";
       dialog->show();
    }

}

主窗体

#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    this->setWindowTitle("动画按钮");



    ui->widget->setImagePath(":/weChart.png");
    ui->widget->setText("微信支付");

    ui->widget_2->setImagePath(":/pay.png");
    ui->widget_2->setText("支付宝支付");

    ui->widget_3->setImagePath(":/bank.png");
    ui->widget_3->setText("银行卡支付");
}

MainWindow::~MainWindow()
{
    delete ui;
}

图片资源是在 阿里巴巴矢量图标网 下载的