Qt编写自定义控件：轮转时钟

效果：

代码：

#ifndef ROTATINGCLOCKWIDGET_H
#define ROTATINGCLOCKWIDGET_H

#include 
#include 

class RotatingClockWidget : public QWidget
{
    Q_OBJECT

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

protected:
    void paintEvent(QPaintEvent *event)override;

private:
    void onSecondTimer();
    void onAnimationTimer();

    QTimer secondTimer;
    QTimer animationTimer;
    int second_OnePlace{0};
    int second_TenPlace{0};
    int minute_OnePlace{0};
    int minute_TenPlace{0};
    int hour_OnePlace{0};
    int hour_TenPlace{0};
    int second_OnePlace_rotatingValue{0};
    int second_TenPlace_rotatingValue{-1};
    int minute_OnePlace_rotatingValue{-1};
    int minute_TenPlace_rotatingValue{-1};
    int hour_OnePlace_rotatingValue{-1};
    int hour_TenPlace_rotatingValue{-1};
};
#endif // ROTATINGCLOCKWIDGET_H

#include "rotatingclockwidget.h"
#include 
#include 
#include 
#include 

RotatingClockWidget::RotatingClockWidget(QWidget *parent)
    : QWidget(parent)
{
    setPalette(QColor(17,17,34));

    connect(&secondTimer,&QTimer::timeout,this,&RotatingClockWidget::onSecondTimer);
    secondTimer.start(1000);

    connect(&animationTimer,&QTimer::timeout,this,&RotatingClockWidget::onAnimationTimer);
    animationTimer.setInterval(40);
}

RotatingClockWidget::~RotatingClockWidget()
{
}

void RotatingClockWidget::paintEvent(QPaintEvent *event)
{
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing,true);
    const auto rect = event->rect();

    auto width = rect.width();
    auto height = rect.height();
    auto sideLength = std::min(width,height) - 20;
    auto halfSideLength = sideLength/2;
    auto separaDistance = halfSideLength / 6.8;
    auto centerPoint = rect.center();

    QRect drawZoneRect = QRect(-halfSideLength,-halfSideLength,sideLength,sideLength);
    drawZoneRect.translate(rect.center());

    painter.setPen(QPen(Qt::white,4,Qt::SolidLine,Qt::RoundCap));
    painter.drawLine(QPoint(centerPoint.x(),centerPoint.y() - separaDistance * 0.2),
                     QPoint(centerPoint.x() + separaDistance * 0.2,centerPoint.y()));
    painter.drawLine(QPoint(centerPoint.x() + separaDistance * 0.2,centerPoint.y()),
                     QPoint(centerPoint.x(),centerPoint.y() + separaDistance * 0.2));

    QColor color(218,165,32);
    painter.setPen(QPen(color,5));
    painter.drawEllipse(centerPoint,static_cast(separaDistance * 0.8),static_cast(separaDistance * 0.8));
    painter.drawEllipse(centerPoint,static_cast(separaDistance * 2.8),static_cast(separaDistance * 2.8));
    painter.drawEllipse(centerPoint,static_cast(separaDistance * 4.8),static_cast(separaDistance * 4.8));
    painter.drawEllipse(centerPoint,static_cast(separaDistance * 6.8),static_cast(separaDistance * 6.8));

    color.setAlpha(100);
    painter.setPen(QPen(color,3));
    painter.drawEllipse(centerPoint,static_cast(separaDistance * 1.8),static_cast(separaDistance * 1.8));
    painter.drawEllipse(centerPoint,static_cast(separaDistance * 3.8),static_cast(separaDistance * 3.8));
    painter.drawEllipse(centerPoint,static_cast(separaDistance * 5.8),static_cast(separaDistance * 5.8));

    color.setAlpha(255);
    painter.setPen(QPen(color));
    auto font = this->font();
    font.setPixelSize(separaDistance * 0.66);
    font.setBold(true);
    painter.setFont(font);
    painter.translate(centerPoint);

    for (int i = 0;i <= 2;++i)
    {
        painter.save();
        QRect textRect(separaDistance * 0.8,
                       -separaDistance * 0.8,
                       separaDistance,
                       separaDistance * 1.6);
        if(Q_UNLIKELY(hour_TenPlace_rotatingValue > 0))
        {
            auto temp = hour_TenPlace - 1;
            if(temp > 2)
                temp = 0;
            if(temp < 0)
                temp = 2;
            painter.rotate(120 * (i - temp) - hour_TenPlace_rotatingValue);
        }
        else
        {
            painter.rotate(120 * (i - hour_TenPlace));
        }

        if(hour_TenPlace == i)
        {
            painter.setPen(Qt::white);
        }
        painter.drawText(textRect,Qt::AlignCenter,QString::number(i));
        painter.restore();
    }

    for (int i = 0;i <= 9;++i)
    {
        painter.save();
        QRect textRect(separaDistance * 1.8,
                       -separaDistance * 0.8,
                       separaDistance,
                       separaDistance * 1.6);
        if(Q_UNLIKELY(hour_OnePlace_rotatingValue > 0))
        {
            auto temp = hour_onePlace - 1;
            if(temp > 9)
                temp = 0;
            if(temp < 0)
                temp = 9;
            painter.rotate(36 * (i - temp) - hour_OnePlace_rotatingValue);
        }
        else
        {
            painter.rotate(36 * (i - hour_OnePlace));
        }

        if(hour_onePlace == i)
        {
            painter.setPen(Qt::white);
        }
        painter.drawText(textRect,Qt::AlignCenter,QString::number(i));
        painter.restore();
    }

    for (int i = 0;i <= 5;++i)
    {
        painter.save();
        QRect textRect(separaDistance * 2.8,
                       -separaDistance * 0.8,
                       separaDistance,
                       separaDistance * 1.6);
        if(Q_UNLIKELY(minute_TenPlace_rotatingValue > 0))
        {
            auto temp = minute_TenPlace - 1;
            if(temp > 5)
                temp = 0;
            if(temp < 0)
                temp = 5;
            painter.rotate(60 * (i - temp) - minute_TenPlace_rotatingValue);
        }
        else
        {
            painter.rotate(60 * (i - minute_TenPlace));
        }

        if(minute_TenPlace == i)
        {
            painter.setPen(Qt::white);
        }
        painter.drawText(textRect,Qt::AlignCenter,QString::number(i));
        painter.restore();
    }

    for (int i = 0;i <= 9;++i)
    {
        painter.save();
        QRect textRect(separaDistance * 3.8,
                       -separaDistance * 0.8,
                       separaDistance,
                       separaDistance * 1.6);
        if(Q_UNLIKELY(minute_OnePlace_rotatingValue > 0))
        {
            auto temp = minute_onePlace - 1;
            if(temp > 9)
                temp = 0;
            if(temp < 0)
                temp = 9;
            painter.rotate(36 * (i - temp) - minute_OnePlace_rotatingValue);
        }
        else
        {
            painter.rotate(36 * (i - minute_OnePlace));
        }

        if(minute_onePlace == i)
        {
            painter.setPen(Qt::white);
        }
        painter.drawText(textRect,Qt::AlignCenter,QString::number(i));
        painter.restore();
    }

    for (int i = 0;i <= 5;++i)
    {
        painter.save();
        QRect textRect(separaDistance * 4.8,
                       -separaDistance * 0.8,
                       separaDistance,
                       separaDistance * 1.6);
        if(second_TenPlace_rotatingValue > 0)
        {
            auto temp = second_TenPlace - 1;
            if(temp > 5)
                temp = 0;
            if(temp < 0)
                temp = 5;
            painter.rotate(60 * (i - temp) - second_TenPlace_rotatingValue);
        }
        else
        {
            painter.rotate(60 * (i - second_TenPlace));
        }

        if(second_TenPlace == i)
        {
            painter.setPen(Qt::white);
        }
        painter.drawText(textRect,Qt::AlignCenter,QString::number(i));
        painter.restore();
    }

    auto temp = second_onePlace - 1;
    if(temp > 9)
        temp = 0;
    if(temp < 0)
        temp = 9;
    for (int i = 0;i <= 9;++i)
    {
        painter.save();
        QRect textRect(separaDistance * 5.8,
                       -separaDistance * 0.8,
                       separaDistance,
                       separaDistance * 1.6);
        if(second_OnePlace_rotatingValue > 0)
        {
            painter.rotate(36 * (i - temp) - second_OnePlace_rotatingValue);
        }
        else
        {
            painter.rotate(36 * (i - second_OnePlace));
        }

        if(second_onePlace == i)
        {
            painter.setPen(Qt::white);
        }
        painter.drawText(textRect,Qt::AlignCenter,QString::number(i));
        painter.restore();
    }
}

void RotatingClockWidget::onSecondTimer()
{
    auto nowTime = QTime::currentTime();
    int second = nowTime.second();
    int minute = nowTime.minute();
    int hour = nowTime.hour();

    second_onePlace = second % 10;//个位
    if(second_TenPlace != second / 10 % 10)//十位
    {
        second_TenPlace = second / 10 % 10;
        second_TenPlace_rotatingValue = 0;
    }
    if(minute_onePlace != minute % 10)
    {
        minute_onePlace = minute % 10;
        minute_OnePlace_rotatingValue = 0;
    }
    if(minute_TenPlace != minute / 10 % 10)
    {
        minute_TenPlace = minute / 10 % 10;
        minute_TenPlace_rotatingValue  = 0;
    }
    if(hour_onePlace != hour % 10)
    {
        hour_onePlace = hour % 10;
        hour_OnePlace_rotatingValue = 0;
    }
    if(hour_TenPlace != hour / 10 % 10)
    {
        hour_TenPlace = hour / 10 % 10;
        hour_TenPlace_rotatingValue = 0;
    }

    animationTimer.start();
}

void processValue(int & value,int max)
{
    if(value >= 0)
    {
        if(value >= max)
        {
            value = -1;
        }
        else
        {
            value += (max / 12);
        }
    }
}

void RotatingClockWidget::onAnimationTimer()
{
    second_OnePlace_rotatingValue += 3;
    if(second_OnePlace_rotatingValue >= 36)
    {
        second_OnePlace_rotatingValue = 0;
        animationTimer.stop();
    }

    processValue(second_TenPlace_rotatingValue,60);
    processValue(minute_OnePlace_rotatingValue,36);
    processValue(minute_TenPlace_rotatingValue,60);
    processValue(hour_OnePlace_rotatingValue,36);
    processValue(hour_TenPlace_rotatingValue,120);

    update();
}

UI参考：CSS3创意个性数字时钟动画特效