QT实现弹跳按钮-自定义控件

         在应用程序中使用弹跳按钮可以使界面更加生动活泼，给用户带来更好的视觉和交互体验。无论是在桌面应用程序还是移动应用程序中，弹跳按钮都是一种很好的选择。

一、简述

         在QT中，实现弹跳按钮可以通过QPushButton和QPropertyAnimation结合使用。以下是一个简单的示例，展示如何创建一个可以弹跳的按钮。

二、 设计思路        

        QT弹跳按钮设计思路可以按照以下步骤进行：

1. 创建一个QPushButton控件，并设置其初始位置和大小。
2. 使用QPropertyAnimation类创建一个弹跳动画效果。
3. 将动画效果应用到按钮上，通过设置按钮的动画属性，如位置属性或大小属性。
4. 设置动画的起始值和结束值，控制按钮的弹跳范围和速度。
5. 将动画关联到按钮的点击事件上，当按钮被点击时开始动画。
6. 可以添加额外的参数来自定义按钮的弹跳效果，比如弹跳的高度、次数、持续时间等。

三、效果 

 

四、核心代码  

1、头文件

#ifndef BOUNCEBUTTON_H
#define BOUNCEBUTTON_H

#include <QPushButton>

class BounceButton : public QPushButton
{
    Q_OBJECT
public:
    explicit BounceButton(QString imgPath,QWidget *parent = nullptr);

    void setImage(QString imgPath);

private:
    void zoom1();
    void zoom2();

private:
    QString m_imgPath;//按钮图标
};

#endif // BOUNCEBUTTON_H

2、实现代码

#include "bouncebutton.h"
#include <QPixmap>
#include <QSize>
#include <QPropertyAnimation>
#include <QRect>
#include <QEasingCurve>


BounceButton::BounceButton(QString imgPath,QWidget *parent) : QPushButton(parent)
{
    setImage(imgPath);

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


void BounceButton::zoom1(){
    //创建动画对象
    QPropertyAnimation *animation1 = new QPropertyAnimation(this,"geometry");
    //设置时间间隔，单位毫秒
    animation1->setDuration(200);
    //创建其实位置
    animation1->setStartValue(QRect(this->x(),this->y(),this->width(),this->height()));
     animation1->setEndValue(QRect(this->x(),this->y()+10,this->width(),this->height()));
    //设置缓和曲线,QEasingCurve::OutBounce 为弹跳效果
    animation1->setEasingCurve(QEasingCurve::OutBounce);
    //开始执行动画
    animation1->start();

}

void BounceButton::zoom2(){
    //创建动画对象
    QPropertyAnimation *animation1 = new QPropertyAnimation(this,"geometry");
    //设置时间间隔，单位毫秒
    animation1->setDuration(200);
    //创建其实位置
    animation1->setStartValue(QRect(this->x(),this->y()+10,this->width(),this->height()));
     animation1->setEndValue(QRect(this->x(),this->y(),this->width(),this->height()));
    //设置缓和曲线,QEasingCurve::OutBounce 为弹跳效果
    animation1->setEasingCurve(QEasingCurve::OutBounce);
    //开始执行动画
    animation1->start();
}


void BounceButton::setImage(QString imgPath)
{
    m_imgPath = imgPath;
    QPixmap pixmap;
    bool ret = pixmap.load(m_imgPath);
    if(!ret)
       return;

    //设置图片固定尺寸
    this->setFixedSize(pixmap.width(),pixmap.height());
    //设置不规则图片的样式表
    this->setStyleSheet("QPushButton{border:0px}");
    //设置图标
    this->setIcon(pixmap);
    //设置图标大小
    this->setIconSize(QSize(pixmap.width(),pixmap.height()));
}

        在这个示例中，创建了一个继承自QPushButton的自定义控件BounceButton。在构造函数中，我们设置了按钮的初始位置和大小，并创建了一个QPropertyAnimation对象作为弹跳动画。我们设置了动画的起始值和结束值，以及持续时间和循环次数。然后，我们将按钮的点击事件连接到动画的start方法，这样当按钮被点击时，动画就会开始。

五、使用示例

以下是一个简单的示例代码，演示了如何在Qt中使用此控件：

#include "mainwindow.h"
#include "bouncebutton.h"

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    resize(180, 180);
    BounceButton* pBounceButton = new BounceButton(tr(":/res/StartButton.png"),this);
    pBounceButton->move(30, 30);
}

MainWindow::~MainWindow()
{
}

       以上示例就是在QT框架下开发的一个可自定义样式的按钮控件。该控件具有弹跳效果，即在鼠标点击按钮后，按钮会有一个向下的弹跳动画，给用户带来更好的交互体验。

弹跳按钮的主要特点包括：

1. 可自定义样式：可以通过修改按钮的背景、边框、文本等属性，以适应不同的界面风格。

2. 弹跳效果：按钮在被点击后会有一个向下的弹跳动画，给用户一种有趣的反馈。

3. 灵活性：按钮可以响应鼠标的点击事件，并可以与其他控件进行交互。

        谢谢您的关注和阅读！如有任何问题或需要帮助，请随时与我联系。希望您能继续支持并享受更多精彩的内容。祝您生活愉快！

六、源代码下载