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