Qt之动画按钮---QPropertyAnimation的使用（悬浮时的动态效果）

话不多说：解释都在代码里

直接上代码

所有文件：

mybtn.h

#ifndef MYBTN_H
#define MYBTN_H
 
#include <QObject>
#include <QWidget>
#include<QPaintEvent>
#include<QEvent>
#include<QPushButton>
#include<qpropertyanimation.h>
#include<QDebug>
class mainButton : public QPushButton//用于主的图片
{
    Q_OBJECT
public:
    mainButton(QString pixenter, QString pixleave, QWidget*parent);
    ~mainButton();
protected:
    //鼠标进入事件
    void enterEvent(QEvent*);
    //鼠标离开事件
    void leaveEvent(QEvent*);
    //绘制动态图片
    void paintEvent(QPaintEvent*);
    //两个动画类：一个进入一个离开
    QPropertyAnimation*m_enteranimation;
    QPropertyAnimation*m_leaveanimation;
    //存储进入、离开事件需要绘画的图片
    QList<QPixmap> m_enterlist;
    QList<QPixmap> m_leavelist;
    //进入事件绘制的图片下标
    int m_enterIndex;
    //离开事件绘制的图片下标
    int m_leaveIndex;
    //标志位
    bool m_enter;
    bool m_leave;
public slots:
    void entervaluechange(QVariant var){m_enterIndex=var.toInt();update();}
    void leavevaluechange(QVariant var){m_leaveIndex=var.toInt();update();}
};
 
#endif // MYBTN_H

mybtn.c

#include "mybtn.h"
#include<QPainter>
#include<QDebug>
#include<QLabel>
#include<QHBoxLayout>
#include<QFontMetrics>
mainButton::mainButton(QString strpixenter,QString strpixleave,QWidget*parent):QPushButton(parent)
{
    QPixmap pixenter(strpixenter);
    QPixmap pixleave(strpixleave);
 
    m_leave=false;
    m_enter=true;
    m_leaveIndex=0;
    m_enterIndex=0;
    for(int i=0;i<10;i++)//进入
    {
        m_enterlist<<pixenter.copy(i*(pixenter.width()/10),0,pixenter.width()/10,pixenter.height());
    }
    for(int j=0;j<8;j++)//离开
    {
        m_leavelist<<pixleave.copy(j*(pixleave.width()/8),0,pixleave.width()/8,pixleave.height());
    }
    //QPropertyAnimation的效果就是把绑定的变量从设定的初始值变为结束值
    m_enteranimation=new QPropertyAnimation(this,"");
    m_enteranimation->setStartValue(0);
    m_enteranimation->setEndValue(9);
    //动画的持续时间
    m_enteranimation->setDuration(600);
    connect(m_enteranimation,SIGNAL(valueChanged(QVariant)),this,SLOT(entervaluechange(QVariant)));
 
    m_leaveanimation=new QPropertyAnimation(this,"");
    m_leaveanimation->setStartValue(0);
    m_leaveanimation->setEndValue(7);
    m_leaveanimation->setDuration(600);
    connect(m_leaveanimation,SIGNAL(valueChanged(QVariant)),this,SLOT(leavevaluechange(QVariant)));
}
mainButton::~mainButton()
{
    delete m_leaveanimation;
    delete m_enteranimation;
}
void mainButton::enterEvent(QEvent *)
{
    m_enter=true;
    m_leave=false;
    m_enteranimation->start();
}
void mainButton::leaveEvent(QEvent *)
{
    m_enter=false;
    m_leave=true;
    m_leaveanimation->start();
}
void mainButton::paintEvent(QPaintEvent *)
{
    QPainter painter(this);
    if(m_enter)
    painter.drawPixmap(rect(),m_enterlist.at(m_enterIndex));
    if(m_leave)
    painter.drawPixmap(rect(),m_leavelist.at(m_leaveIndex));
}

在mainwindow.c中调用：

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include "mybtn.h"
 
MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    mainButton* m_btn=new mainButton(":/clean_Hover.png",":/clean_Leave.png",this);
    m_btn->setGeometry(30,30,95,95);
}
 
MainWindow::~MainWindow()
{
    delete ui;
}

然后运行你就可以看到当你悬浮进入的动态效果了，效果就是这两张图的轮流显示

有需要的可以下载：https://download.csdn.net/download/qq_41399894/11255959