Qt波形扩散效果

在Qt中，如果你想通过传统的Widget方式实现波形扩散效果，可以使用以下步骤：

创建自定义Widget：继承自QWidget，并重写paintEvent方法来绘制波形。

绘制波形：在paintEvent中使用QPainter来绘制波形。

实现扩散动画：使用QTimer和自定义的变量来控制波形的变化，并触发重绘。

更新视图：在动画过程中，通过定时器触发重绘来更新波形的显示。

代码如下

#include "qtantanscanning.h"
#include <QTimer>
#include <QPainter>
#include <QVector>
#include <QPair>
#include <QDebug>
#include <QRectF>
#include <QMouseEvent>
#include <QPainterPath>
#include <QRegion>
#include <QSequentialAnimationGroup>
#include <QPropertyAnimation>


QTanTanScanning::QTanTanScanning(QWidget *parent) : QWidget(parent)
{
    ringMaxR = 95;
    ringColor = QColor(255, 0, 0);
    scannigColor = QColor(255, 0, 0);
    m_pressflag = false;
    centerRingR = 20;//中心图片大小
    centerR = 20;//中心图片大小

    ringPenWidthStep = 0.01;
    ringsRStep = 1;
    ringsAlphaStep = 255 / ringMaxR;


    m_Timer = new QTimer(this);
    connect(m_Timer, SIGNAL(timeout()), this, SLOT(mTimeout()));
    m_Timer->start(1000);

    ringsTimer = new QTimer(this);
    ringsTimer->setInterval(50);//波形快慢
    connect(ringsTimer, SIGNAL(timeout()), this, SLOT(ringsTimerWork()));
    ringsTimer->start();

    QPropertyAnimation *anim1 = new QPropertyAnimation(this, "");
    anim1->setStartValue(20);//开始值40
    anim1->setEndValue(25);//结束值50
    anim1->setDuration(500);//持续时间
    QPropertyAnimation *anim2 = new QPropertyAnimation(this, "");
    anim2->setStartValue(25);
    anim2->setEndValue(15);
    anim2->setDuration(500);//持续时间
    QPropertyAnimation *anim3 = new QPropertyAnimation(this, "");
    anim3->setStartValue(15);
    anim3->setEndValue(20);
    anim3->setDuration(500);//持续时间

    //动画组 动画效果依次运行
    animationGroup = new QSequentialAnimationGroup() ;
    animationGroup->addAnimation(anim1);
    animationGroup->addAnimation(anim2);
    animationGroup->addAnimation(anim3);

    connect(anim1, SIGNAL(valueChanged(QVariant)), this, SLOT(updateRadius(QVariant)));
    connect(anim2, SIGNAL(valueChanged(QVariant)), this, SLOT(updateRadius(QVariant)));
    connect(anim3, SIGNAL(valueChanged(QVariant)), this, SLOT(updateRadius(QVariant)));
    mTimeout();
}

void QTanTanScanning::updateRadius(QVariant radius)
{
    //如果鼠标悬停则逐渐变小,鼠标移开则逐渐变大直到恢复
    centerR = radius.toInt();
    update();
}

void QTanTanScanning::ringsTimerWork()
{
    QVector<struct RingData>::iterator iter = rings.begin();
    while(iter != rings.end())
    {
        struct RingData currRing = *iter;

        if(currRing.radius < ringMaxR)
        {
            currRing.radius += ringsRStep;
            currRing.alpha = currRing.radius * (255 / ringMaxR);
            currRing.penWidth = 3.0 - currRing.radius * (3.0 / ringMaxR);
            *iter = currRing;
            iter++;
        }
        else
        {
            rings.erase(iter);
        }
    }

    update();
}

void QTanTanScanning::mTimeout()
{
    animationGroup->start();
    QMatrix qMatrix;
    int width = this->width();
    int height = this->height();
    int side = qMin(width, height);
    qMatrix.scale(side / 200.0, side / 200.0);
    QRegion mEllipse = QRegion(-centerRingR, -centerRingR, centerRingR * 2, centerRingR * 2, QRegion::Ellipse);
    mEllipse = qMatrix.map(mEllipse);
    struct RingData ring;
    ring.radius = centerRingR;
    ring.alpha = 255;
    ring.penWidth = 10;
    rings.push_back(ring);
    update();

}

void QTanTanScanning::paintEvent(QPaintEvent *)
{
    int width = this->width();
    int height = this->height();
    int side = qMin(width, height);

    //绘制准备工作,启用反锯齿,平移坐标轴中心,等比例缩放
    QPainter painter(this);
    painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);
    painter.translate(width / 2, height / 2);
    painter.scale(side / 200.0, side / 200.0);

    drawRings(&painter);
    drawCenterRing(&painter);
}

void QTanTanScanning::drawRings(QPainter *painter)
{
    painter->save();
    painter->setBrush(Qt::NoBrush);
    QVector<struct RingData>::iterator iter = rings.begin();
    while(iter != rings.end())
    {
        struct RingData currRing = *iter;
        int radius = currRing.radius;
        //绘制圆弧方法绘制圆环
        float penWidth = currRing.penWidth;


        QRectF rect(-radius + penWidth / 2, -radius + penWidth / 2, radius * 2 - penWidth, radius * 2 - penWidth);
        //可以自行修改画笔的后三个参数,形成各种各样的效果,例如Qt::FlatCap改为Qt::RoundCap可以产生圆角效果
        ringColor.setAlpha(255 - currRing.alpha);
        QPen pen(ringColor, penWidth, Qt::SolidLine, Qt::FlatCap, Qt::MPenJoinStyle);

        //绘制总范围角度圆弧
        pen.setColor(ringColor);
        painter->setPen(pen);
        if(penWidth > 0){
            painter->drawArc(rect, 0 * 16, 360 * 16);
        }

        iter++;
    }

    painter->restore();

}

void QTanTanScanning::drawCenterRing(QPainter *painter)
{
    painter->save();

    QPixmap pixmap(":/image/bg.jpg");

    QPainterPath path;
    path.addEllipse(QPoint(0, 0), centerR, centerR);
    painter->setClipPath(path);

    QRect rect(-centerR, -centerR, centerR * 2, centerR * 2);
    painter->drawPixmap(rect, pixmap);

    int penWidth = 3;
    //可以自行修改画笔的后三个参数,形成各种各样的效果,例如Qt::FlatCap改为Qt::RoundCap可以产生圆角效果
    QPen pen(Qt::white, penWidth, Qt::SolidLine, Qt::FlatCap, Qt::MPenJoinStyle);
    painter->setPen(pen);
    painter->drawArc(rect, 0, 360 * 16);
    painter->restore();

}

QSize QTanTanScanning::sizeHint() const
{
    return QSize(100, 100);
}

QSize QTanTanScanning::minimumSizeHint() const
{
    return QSize(50, 50);
}

#ifndef QTANTANSCANNING_H
#define QTANTANSCANNING_H

#include <QWidget>
#include <QVariant>
#include <QDebug>


struct RingData
{
    int radius;
    int alpha;
    float penWidth;
};

class QSequentialAnimationGroup;


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

public:
    QSize sizeHint()                        const;
    QSize minimumSizeHint()                 const;

protected:
    void paintEvent(QPaintEvent *);
    void drawRings(QPainter *painter);//扩散效果

    void drawCenterRing(QPainter *painter);//中间效果


signals:

public slots:
    void mTimeout();

private slots:
    void ringsTimerWork();
    void updateRadius(QVariant radius);

private:
    QTimer *m_Timer;     //扩散圈定时器
    QTimer *ringsTimer;     //扩散圈定时器
    QColor ringColor;       //扩散圈颜色
    QColor scannigColor;    //扫描线颜色
    int ringMaxR;           //最大半径

    QVector<QPair<int, int>> ringsR2Alpha; //扩散圈的大小与透明度
    bool m_pressflag;       //判断按钮是否被点击
    int centerRingR;        //圆形按钮的半径
    int centerR;
    QVector<struct RingData> rings;
    float ringPenWidthStep;
    float ringsRStep;
    float ringsAlphaStep;
    QSequentialAnimationGroup *animationGroup;  //动画对象

};

#endif // QTANTANSCANNING_H