一、簡(jiǎn)述

前幾天在群里看見有個(gè)小伙伴用的一款gif錄屏軟件有一個(gè)類似水滴的點(diǎn)擊效果。于是想了想，便開始了Code。思路也很簡(jiǎn)單，就是借助Qt的動(dòng)畫類QVariantAnimation然后不斷重繪達(dá)到點(diǎn)擊的動(dòng)畫效果，先看一下效果圖。

二、代碼之路

WaterDrop.h

#include <QtWidgets/QWidget> #include <QVariantAnimation>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; };

WaterDrop.cpp

#include "WaterDrop.h" #include <QPainter>// 水滴的半徑; #define WATER_DROP_RADIUS 15WaterDrop::WaterDrop(QWidget *parent): QWidget(parent), m_waterDropAnimation(NULL), m_animationRadius(0), m_waterDropColor(QColor(255, 120, 0, 150)) // 默認(rèn)為橘黃色; {this->setFixedSize(QSize(WATER_DROP_RADIUS * 2, WATER_DROP_RADIUS *2));this->setWindowFlags(Qt::FramelessWindowHint | Qt::Tool);this->setAttribute(Qt::WA_TranslucentBackground);// 控件顯示完關(guān)閉后自動(dòng)刪除;this->setAttribute(Qt::WA_DeleteOnClose);m_waterDropAnimation = new QVariantAnimation(this); }WaterDrop::~WaterDrop() { }void WaterDrop::move(const QPoint &point) {// 這里要把鼠標(biāo)點(diǎn)擊的點(diǎn)轉(zhuǎn)換為圓心點(diǎn)坐標(biāo);QPoint translatePoint = point - QPoint(WATER_DROP_RADIUS, WATER_DROP_RADIUS);__super::move(translatePoint); }void WaterDrop::show() {QWidget::show();// 通過動(dòng)畫類不斷進(jìn)行重繪;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();} // 設(shè)置水滴的顏色; void WaterDrop::setColor(QColor color) {m_waterDropColor = color; } // 繪制鼠標(biāo)的水滴點(diǎn)擊效果; void WaterDrop::paintEvent(QPaintEvent *event) {QPainter painter(this);painter.setRenderHint(QPainter::Antialiasing);painter.setPen(Qt::NoPen);painter.setBrush(QBrush(m_waterDropColor));// 思路就是先繪制一個(gè)固定大小的圓A，然后繪制同一圓心的透明的圓B，然后通過動(dòng)畫類是圓B的半徑從0增長(zhǎng)到WATER_DROP_RADIUS，以致覆蓋固定的圓A;QPainterPath waterDropPath;waterDropPath.addEllipse(QPoint(WATER_DROP_RADIUS, WATER_DROP_RADIUS), WATER_DROP_RADIUS, WATER_DROP_RADIUS);QPainterPath hidePath;hidePath.addEllipse(QPoint(WATER_DROP_RADIUS, WATER_DROP_RADIUS), m_animationRadius, m_animationRadius);waterDropPath -= hidePath;painter.drawPath(waterDropPath); }void WaterDrop::onRaduisChanged(QVariant value) {// 不斷增加圓B的半徑值,并重繪;m_animationRadius = value.toInt();update(); }

測(cè)試代碼

// 新建一窗口類，重寫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(); }

總結(jié)

以上是生活随笔為你收集整理的Qt动画之鼠标水滴点击效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。