(资料图片)

一、简述

前几天在群里看见有个小伙伴用的一款gif录屏软件有一个类似水滴的点击效果。于是想了想，便开始了Code。思路也很简单，就是借助Qt的动画类QVariantAnimation然后不断重绘达到点击的动画效果，先看一下效果图。

二、代码之路

#include #include class WaterDrop : public QWidget{Q_OBJECTpublic:WaterDrop(QWidget *parent = Q_NULLPTR);~WaterDrop();void show();void move(const QPoint &point);void setColor(QColor color);private:void paintEvent(QPaintEvent *event);public slots:void onRaduisChanged(QVariant value);private:QVariantAnimation* m_waterDropAnimation;// 水滴变化的半径;int m_animationRadius;// 水滴的颜色;QColor m_waterDropColor;};

#include ""#include // 水滴的半径;#define WATER_DROP_RADIUS 15WaterDrop::WaterDrop(QWidget *parent): QWidget(parent), m_waterDropAnimation(NULL), m_animationRadius(0), m_waterDropColor(QColor(255, 120, 0, 150)) // 默认为橘黄色;{this->setFixedSize(QSize(WATER_DROP_RADIUS * 2, WATER_DROP_RADIUS *2));this->setWindowFlags(Qt::FramelessWindowHint | Qt::Tool);this->setAttribute(Qt::WA_TranslucentBackground);// 控件显示完关闭后自动删除;this->setAttribute(Qt::WA_DeleteOnClose);m_waterDropAnimation = new QVariantAnimation(this);}WaterDrop::~WaterDrop(){}void WaterDrop::move(const QPoint &point){// 这里要把鼠标点击的点转换为圆心点坐标;QPoint translatePoint = point - QPoint(WATER_DROP_RADIUS, WATER_DROP_RADIUS);__super::move(translatePoint);}void WaterDrop::show(){QWidget::show();// 通过动画类不断进行重绘;m_waterDropAnimation->setStartValue(0);m_waterDropAnimation->setEndValue(WATER_DROP_RADIUS);m_waterDropAnimation->setDuration(350);connect(m_waterDropAnimation, &QVariantAnimation::valueChanged, this, &WaterDrop::onRaduisChanged);connect(m_waterDropAnimation, &QVariantAnimation::finished, this, &WaterDrop::close);m_waterDropAnimation->start();}// 设置水滴的颜色;void WaterDrop::setColor(QColor color){m_waterDropColor = color;}// 绘制鼠标的水滴点击效果;void WaterDrop::paintEvent(QPaintEvent *event){QPainter painter(this);(QPainter::Antialiasing);(Qt::NoPen);(QBrush(m_waterDropColor));// 思路就是先绘制一个固定大小的圆A，然后绘制同一圆心的透明的圆B，然后通过动画类是圆B的半径从0增长到WATER_DROP_RADIUS，以致覆盖固定的圆A;QPainterPath waterDropPath;(QPoint(WATER_DROP_RADIUS, WATER_DROP_RADIUS), WATER_DROP_RADIUS, WATER_DROP_RADIUS);QPainterPath hidePath;(QPoint(WATER_DROP_RADIUS, WATER_DROP_RADIUS), m_animationRadius, m_animationRadius);waterDropPath -= hidePath;(waterDropPath);}void WaterDrop::onRaduisChanged(QVariant value){// 不断增加圆B的半径值,并重绘;m_animationRadius = ();update();}

测试代码

// 新建一窗口类，重写mousePressEvent事件即可;void MyWidget::mousePressEvent(QMouseEvent *event){QPoint cursorPos = event->pos();qDebug() << "mousePressEvent" << cursorPos;WaterDrop* waterDrop = new WaterDrop();waterDrop->move(this->mapToGlobal(cursorPos));waterDrop->setColor(Qt::green);waterDrop->show();}

【领 QT开发教程 学习资料， 点击下方链接莬费领取↓↓ ，先码住不迷路~】

点击这里：