Qt 创建按钮动画

 

1 封装自定义按钮 myPushBttton

2 构造函数 (默认图片,按下后显示图片)

3 测试开始按钮

4 开始制作特效

5 zoom1 向下弹跳

6 zoom2 向上弹跳

代码如下

main.h

复制代码
#ifndef MAINMAIN_H
#define MAINMAIN_H

#include <QMainWindow>
#include<QEvent>

QT_BEGIN_NAMESPACE
namespace Ui { class MainMain; }
QT_END_NAMESPACE

class MainMain : public QMainWindow
{
    Q_OBJECT

public:
    MainMain(QWidget *parent = nullptr);
    ~MainMain();
protected:
    void paintEvent(QPaintEvent *event);

private:
    Ui::MainMain *ui;
};
#endif // MAINMAIN_H
复制代码

main.cpp

 

复制代码
#include "mainmain.h"
#include "ui_mainmain.h"
#include<QIcon>
#include<QAction>
#include<QPainter>
#include"mypushbutton.h"
#include<QDebug>

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

    //设置场景大小
    setFixedSize(320,588);
    //设置标题
    setWindowTitle("my text game");
    //设置图标
    setWindowIcon(QIcon(":/res/szan.png"));

    //退出
    connect(ui->actionquit2,&QAction::triggered,[=](){
        this->close();
    });

    myPushButton *myBtn = new myPushButton(":/res/szan.png");
    myBtn->setParent(this);
    myBtn->move(this->width()/2-myBtn->width()/2, this->height()*0.7);
    connect(myBtn,&myPushButton::clicked,[=](){
        qDebug()<<"mybtn clicked!!!";
        myBtn->zoom1();
        myBtn->zoom2();
    });

}

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


//画家事件
void MainMain::paintEvent(QPaintEvent *event)
{
    //定义一个画家
    QPainter qpainter(this);
    //定义一个pixmap
    QPixmap pixmap;
    //加载图片
    pixmap.load(":/res/pjbj.png");
    //把图片画上去 图片和屏幕一样大小
    qpainter.drawPixmap(0,0,this->width(),this->height(),pixmap);

    //加载图标还是用pixmap
    pixmap.load(":/res/szan.png");
    pixmap = pixmap.scaled(pixmap.width()*0.5,pixmap.height()*0.5);
    qpainter.drawPixmap(0,0,pixmap);

}
复制代码

自定义的 myPushButton.h

复制代码
#ifndef MYPUSHBUTTON_H
#define MYPUSHBUTTON_H

#include <QWidget>
#include<QPushButton>

class myPushButton : public QPushButton
{
    Q_OBJECT
public:
    explicit myPushButton(QPushButton *parent = nullptr);
    myPushButton(QString normalImg,QString pressImg=nullptr);
        void zoom1();//向上跳
        void zoom2();//向下跳

private:
    QString normalImgPath;
    QString pressImgPath;

signals:

};

#endif // MYPUSHBUTTON_H
复制代码

自定义的 myPushButton.cpp

复制代码
#include "mypushbutton.h"
#include<QDebug>
#include<QPropertyAnimation>
myPushButton::myPushButton(QPushButton *parent) : QPushButton(parent)
{
}

myPushButton::myPushButton(QString normalImg,QString pressImg)
{
    this->normalImgPath = normalImg;
    this->pressImgPath = pressImg;

    QPixmap fix;
    bool ret = fix.load(normalImg);
    if(!ret){
        qDebug()<<"图片加载失败!!!";
    }
    //设置图片固定大小
    this->setFixedSize(fix.width(),fix.height());
    // 设置不规则图片样式
    this->setStyleSheet("QPushButton{border:Opx;}");
    //设置图标
    this->setIcon(fix);
    //设置图标大小
    this->setIconSize(QSize(fix.width(),fix.height() ));
}
//向上跳
void myPushButton::zoom1(){
    //创建动态对象
    QPropertyAnimation *animalton = new QPropertyAnimation(this,"geometry");
    //设置间隔时间
    animalton->setDuration(200);
    //设置起始位置
    animalton->setStartValue(QRect(this->x(),this->y(),this->width(),this->height()));
    //设置结束位置
    animalton->setEndValue(QRect(this->x(),this->y()+10,this->width(),this->height()));
    //设置动画曲线
    animalton->setEasingCurve(QEasingCurve::OutBounce);
    //动起来
    animalton->start();

}
//向下跳
void myPushButton::zoom2(){
    //创建动态对象
    QPropertyAnimation *animalton = new QPropertyAnimation(this,"geometry");
    //设置间隔时间
    animalton->setDuration(200);
    //设置起始位置
    animalton->setStartValue(QRect(this->x(),this->y()+10,this->width(),this->height()));
    //设置结束位置
    animalton->setEndValue(QRect(this->x(),this->y(),this->width(),this->height()));
    //设置动画曲线+10
    animalton->setEasingCurve(QEasingCurve::OutBounce);
    //动起来
    animalton->start();
}
复制代码

 

posted @   摇摆的时钟  阅读(529)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具
点击右上角即可分享
微信分享提示