一、簡述

前幾天在群裡看見有個小夥伴用的一款gif錄屏軟體有一個類似水滴的點選效果。於是想了想，便開始了Code。思路也很簡單，就是藉助Qt的動畫類QVariantAnimation然後不斷重繪達到點選的動畫效果，先看一下效果圖。

二、程式碼之路

WaterDrop.h

#include <QtWidgets/QWidget>
#include <QVariantAnimation>

class WaterDrop : public QWidget
{
    Q_OBJECT

public:
    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 15

WaterDrop::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()
{
    __super::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);
    painter.setRenderHint(QPainter::Antialiasing);
    painter.setPen(Qt::NoPen);
    painter.setBrush(QBrush(m_waterDropColor));

    // 思路就是先繪製一個固定大小的圓A，然後繪製同一圓心的透明的圓B，然後通過動畫類是圓B的半徑從0增長到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();
}

測試程式碼

// 新建一視窗類，重寫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動畫類做出的一些動畫特效，敬請期待哈O(∩_∩)O！

支援一下，請點個贊吧！！！

程式碼下載