QPropertyAnimation 类应用

QPropertyAnimation类是Qt中的动画类，用于将属性值从一个值平滑地过渡到另一个值。它可以用于各种Qt对象（如QWidget、QGraphicsItem等）的属性动画，例如移动位置、改变大小、旋转等。QPropertyAnimation类可以设置目标对象、属性名称、起始值、结束值、持续时间、加速度曲线等属性。在动画过程中，QPropertyAnimation会自动更新目标对象的属性值，从而实现动画效果。QPropertyAnimation类具有各种信号，如valueChanged()和finished()，可用于监视动画的进度和完成情况。

使用QPropertyAnimation类需要以下步骤：

1. 创建动画对象并设置动画参数，如目标对象、属性名称、动画时长、缓动曲线等。

2. 启动动画对象并开启事件循环，让动画对象按照预设的参数逐帧执行动画过渡。

3. 在动画结束后进行清理工作，如解除对象和动画对象的关联关系，释放动画对象的内存等。

Widget 控件显示文字及图像方法

示例：实现下图

UI绘图：

增加一个新类：.h和.cpp文件自己加析构函数

代码示例：

animationbutton.h

#ifndef ANIMATIONBUTTON_H
#define ANIMATIONBUTTON_H

#include <QWidget>
#include <QVariant>
class QPropertyAnimation;
#include "qdebug.h"
#include "qpainter.h"
#include "qpropertyanimation.h"

class AnimationButton : public QWidget
{
    Q_OBJECT
public:
    explicit AnimationButton(QWidget *parent = nullptr);
    ~AnimationButton();

protected:
    void enterEvent(QEvent *event);
    void leaveEvent(QEvent *event);
    void paintEvent(QPaintEvent *event);

private:
    bool enter; // 是否进入
    bool leave; // 是否离开
    int pixwidth; // 图片宽度
    int pixheight; // 图片调度
    int oldwidth; // 图片原宽度
    int oldheight; // 图片原高度

    int targetwidth; // 目标宽度
    int targetheight; // 目标高度
    QString text; // 图像文字
    QString image; // 图像路径

    QPropertyAnimation *enteranimation; // 进入动画
    QPropertyAnimation *leaveanimation; // 离开动画

private slots:
    void enterimagechanged(QVariant index);
    void leaveimagechanged(QVariant index);

public slots:
    void settext(QString text); // 显示文字
    void setimage(QString image); // 显示图像

};

#endif // ANIMATIONBUTTON_H

frmanimationbutton.h

#ifndef FRMANIMATIONBUTTON_H
#define FRMANIMATIONBUTTON_H

#include <QWidget>

QT_BEGIN_NAMESPACE
namespace Ui { class FrmAnimationButton; }
QT_END_NAMESPACE

class FrmAnimationButton : public QWidget
{
    Q_OBJECT

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

private:
    Ui::FrmAnimationButton *ui;
};
#endif // FRMANIMATIONBUTTON_H

animationbutton.cpp

#include "animationbutton.h"

AnimationButton::AnimationButton(QWidget *parent) : QWidget(parent)
{
    enter=true;
    leave=false;
    pixwidth=0;
    pixheight=0;
    oldwidth=0;
    oldheight=0;

    enteranimation=new QPropertyAnimation(this,"");
    enteranimation->setStartValue(0);
    enteranimation->setEndValue(5);
    enteranimation->setDuration(200);
    connect(enteranimation,SIGNAL(valueChanged(QVariant)),this,
            SLOT(enterimagechanged(QVariant)));

    leaveanimation=new QPropertyAnimation(this,"");
    leaveanimation->setStartValue(0);
    leaveanimation->setEndValue(5);
    leaveanimation->setDuration(200);
    connect(leaveanimation,SIGNAL(valueChanged(QVariant)),this,
            SLOT(leaveimagechanged(QVariant)));

}

AnimationButton::~AnimationButton()
{
    // 删除对象指针
    delete enteranimation;
    delete leaveanimation;
}

void AnimationButton::enterEvent(QEvent *event)
{
    enter=true;
    leave=false;
    pixwidth=pixwidth-25;
    pixheight=pixheight-25;
    enteranimation->start();
}

void AnimationButton::leaveEvent(QEvent *event)
{
    enter=false;
    leave=true;
    pixwidth=oldwidth;
    pixheight=oldheight;
    leaveanimation->start();
}

void AnimationButton::paintEvent(QPaintEvent *event)
{
    if(image.isEmpty())
    {
        return ;
    }

    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing);

    // 通过此QPixmap类中scaled()函数对图像进行放大或缩小
    QPixmap pix(image);
    pix=pix.scaled(targetwidth,targetheight,Qt::IgnoreAspectRatio,Qt::SmoothTransformation);

    if(enter || leave)
    {
        int pixx=rect().center().x()-targetwidth/2;
        int pixy=rect().center().y()-targetheight/2;

        QPoint point(pixx,pixy);
        painter.drawPixmap(point,pix);
        painter.drawText(QRectF(0,height()-20,width(),20),Qt::AlignCenter,text);
    }
}

void AnimationButton::enterimagechanged(QVariant index)
{
    int i=index.toInt();
    targetwidth=pixwidth+i*5;
    targetheight=pixheight+i*5;
    update();
}

void AnimationButton::leaveimagechanged(QVariant index)
{
    int i=index.toInt();
    targetwidth=pixwidth-i*5;
    targetheight=pixheight-i*5;
    update();
}

void AnimationButton::settext(QString text) // 显示文字
{
    this->text=text;
    update();
}

void AnimationButton::setimage(QString image) // 显示图像
{
    this->image=image;
    QPixmap pix(image);
    pixwidth=pix.width();
    pixheight=pix.height();
    oldwidth=pixwidth;
    oldheight=pixheight;

    targetwidth=pixwidth-25;
    targetheight=pixheight-25;
    update();
}

frmanimationbutton.cpp

#include "frmanimationbutton.h"
#include "ui_frmanimationbutton.h"

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

    setWindowTitle("自定义widget");

    QString qss="color:#BECEC6;background:qlineargradient(spread:pad,x1:0,y1:0,x2:0,y2:1,stop:0 #1B3152,stop:1 #255C80);";
    this->setStyleSheet(qss);

    ui->widget1->settext("家居");
    ui->widget1->setimage(":/new/prefix1/image/v-home.png");

    ui->widget2->settext("成员");
    ui->widget2->setimage(":/new/prefix1/image/v-contact.png");

    ui->widget3->settext("图片");
    ui->widget3->setimage(":/new/prefix1/image/v-img.png");

    ui->widget4->settext("通信");
    ui->widget4->setimage(":/new/prefix1/image/v-record.png");

    update();
}

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

main.cpp

#include "frmanimationbutton.h"

#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    FrmAnimationButton w;
    w.show();
    return a.exec();
}