Qt 自定义（异形）形状按钮封装及实现点击弹跳效果

---

前言

Qt通过重新封装QPushButton类，实现自定义（异形）按钮，并且实现鼠标点击后的上下跳动特效，
具体效果如下图所示，将QPushButton默认的方形按钮换为“AVIC”异形图标按钮，鼠标点击后先向下跳动20像素，然后再向上跳动20像素。

---

效果

核心代码

右键工程文件夹Add New，选择新建一个C++ Class，定义Class Name为MyButton，需要Add Q_OBJECT可自动生成mybutton.h及mybutton.cpp。

将MyButton的父类修改为QPushButton，并且重新定义构造函数为
MyButton(QString normalImg, QString pressImg = “”);
第一个参数为正常状态下的图标的地址，第二个参数为按下状态下的图标地址，默认为空

mybutton.h

#ifndef MYBUTTON_H
#define MYBUTTON_H

#include <QObject>
#include <QWidget>
#include <QPushButton>
#include <QDebug>
#include <QPropertyAnimation>

class MyButton : public QPushButton
{
    Q_OBJECT
public:
    explicit MyButton(QString normalImg, QString pressImg = "");
    //按钮初始状态下的图片地址
    QString normalImgPath;
    //按钮按下状态下的图片地址
    QString pressedImgPath;

signals:

public slots:
	//按钮向下移动20像素
    void zoom1();
    //按钮向上移动20像素
    void zoom2();

};

#endif // MYBUTTON_H

mybutton.cpp

#include "mybutton.h"

MyButton::MyButton(QString normalImg, QString pressImg)
{
    normalImgPath = normalImg;
    pressedImgPath = pressImg;

    QPixmap pixmap;

    bool ret = pixmap.load(normalImgPath);
    if(!ret)
    {
        qDebug() << normalImg <<"load image failure!";
    }

    this->setFixedSize(pixmap.width(),pixmap.height());
    this->setStyleSheet("QPushButton{border:0px}");
    this->setIcon(pixmap);
    this->setIconSize(QSize(pixmap.width(),pixmap.height()));

}

void MyButton::zoom1()
{
    //创建动画对象
    QPropertyAnimation *animation = new QPropertyAnimation(this, "geometry");
    //设置时间间隔
    animation->setDuration(200);
    //创建开始位置
    animation->setStartValue(QRect(this->x(),this->y(),this->width(),this->height()));
    //创建结束位置
    animation->setEndValue(QRect(this->x(),this->y()+30,this->width(),this->height()));
    //设置缓和曲线，QEasingCurve::OutBounce为弹跳结果
    animation->setEasingCurve(QEasingCurve::OutBounce);
    //开始执行动画
    animation->start();
}

void MyButton::zoom2()
{
    QPropertyAnimation *animation = new QPropertyAnimation(this, "geometry");
    animation->setDuration(200);
    animation->setStartValue(QRect(this->x(),this->y()+30,this->width(),this->height()));
    animation->setEndValue(QRect(this->x(),this->y(),this->width(),this->height()));
    animation->setEasingCurve(QEasingCurve::OutBounce);
    animation->start();

}

widget.h

#ifndef WIDGET_H
#define WIDGET_H

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

QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();

private:
    Ui::Widget *ui;
    MyButton *startBtn;
};
#endif // WIDGET_H

widget.cpp

startBtn = new MyButton(“:/3.png”);
在Widget构造函数里新创建一个MyButton类，传入按钮初始状态下的图片地址，本案例下按钮没有按下状态
connect(startBtn,&MyButton::clicked,={ startBtn->zoom1(); startBtn->zoom2();
将按钮的点击信号与实现按钮的向下20像素、向上20像素响应动作进行绑定

#include "widget.h"
#include "ui_widget.h"

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    startBtn = new MyButton(":/3.png");
    startBtn->setParent(this);
    startBtn->move(this->width()*0.5-startBtn->width()*0.5,this->height()*0.6);

    connect(startBtn,&MyButton::clicked,[=](){
        startBtn->zoom1();
        startBtn->zoom2();
    });
}

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