《Qt動畫編程實戰：輕松實現頭像旋轉效果》

Qt 提供了豐富的動畫框架，可以輕松實現各種平滑的動畫效果。其中，旋轉動畫是一種常見的 UI 交互方式，廣泛應用于加載指示器、按鈕動畫、場景變換等。本篇文章將詳細介紹如何使用 Qt 實現旋轉動畫。

1、效果

2、具體實現

#ifndef ROTATINGIMAGE_H
#define ROTATINGIMAGE_H#include <QWidget>
#include <QLabel>
#include <QPropertyAnimation>class RotatingImage : public QWidget
{Q_OBJECTQ_PROPERTY(qreal rotation READ rotation WRITE setRotation)public:explicit RotatingImage(QWidget *parent = nullptr);qreal rotation() const { return m_rotation; }void setRotation(qreal rotation);public slots:void startRotation();void stopRotation();void pauseRotation();void resumeRotation();void setRotationDuration(int msecs);protected:void resizeEvent(QResizeEvent *event) override;private:void updatePixmap();QPixmap getScaledPixmap() const;private:QLabel *imageLabel;QPropertyAnimation *rotationAnimation;qreal m_rotation;QPixmap originalPixmap;QSize targetSize;
};#endif // ROTATINGIMAGE_H #include "rotatingimage.h"
#include <QPixmap>
#include <QTransform>
#include <QVBoxLayout>
#include <QResizeEvent>
#include <QPainter>
#include <QEasingCurve>RotatingImage::RotatingImage(QWidget *parent): QWidget(parent), m_rotation(0)
{// 創建布局QVBoxLayout *layout = new QVBoxLayout(this);layout->setContentsMargins(0, 0, 0, 0);// 創建標簽并設置圖片imageLabel = new QLabel(this);imageLabel->setFixedSize(QSize(200, 200));originalPixmap.load(":/images/test.png");// 設置目標大小targetSize = QSize(200, 200);  // 比Label小一點，留出邊距// 初始化圖片updatePixmap();imageLabel->setAlignment(Qt::AlignCenter);imageLabel->setStyleSheet("QLabel { border-radius: 100px; background: transparent; }");layout->addWidget(imageLabel, 0, Qt::AlignCenter);// 設置動畫rotationAnimation = new QPropertyAnimation(this, "rotation", this);rotationAnimation->setStartValue(0.0);rotationAnimation->setEndValue(360.0);rotationAnimation->setDuration(5000);rotationAnimation->setLoopCount(-1);// 使用QEasingCurve使動畫更流暢rotationAnimation->setEasingCurve(QEasingCurve::Linear);rotationAnimation->start();
}void RotatingImage::setRotation(qreal rotation)
{if (m_rotation != rotation) {m_rotation = rotation;updatePixmap();}
}void RotatingImage::updatePixmap()
{QPixmap scaledPix = getScaledPixmap();// 創建一個透明的目標圖片，大小與Label相同QPixmap targetPixmap(imageLabel->size());targetPixmap.fill(Qt::transparent);// 在目標圖片上繪制旋轉后的圖片QPainter painter(&targetPixmap);painter.setRenderHint(QPainter::Antialiasing);painter.setRenderHint(QPainter::SmoothPixmapTransform);// 計算中心點QPointF center = targetPixmap.rect().center();painter.translate(center);painter.rotate(m_rotation);painter.translate(-center);// 計算繪制位置使圖片居中QPointF drawPos((targetPixmap.width() - scaledPix.width()) / 2.0,(targetPixmap.height() - scaledPix.height()) / 2.0);painter.drawPixmap(drawPos, scaledPix);painter.end();imageLabel->setPixmap(targetPixmap);
}QPixmap RotatingImage::getScaledPixmap() const
{return originalPixmap.scaled(targetSize,Qt::KeepAspectRatio,Qt::SmoothTransformation);
}void RotatingImage::resizeEvent(QResizeEvent *event)
{QWidget::resizeEvent(event);updatePixmap();
}void RotatingImage::startRotation()
{rotationAnimation->start();
}void RotatingImage::stopRotation()
{rotationAnimation->stop();
}void RotatingImage::pauseRotation()
{rotationAnimation->pause();
}void RotatingImage::resumeRotation()
{rotationAnimation->resume();
}void RotatingImage::setRotationDuration(int msecs)
{rotationAnimation->setDuration(msecs);
} #include <QApplication>
#include "rotatingimage.h"int main(int argc, char *argv[])
{QApplication app(argc, argv);RotatingImage *rotatingImage = new RotatingImage();rotatingImage->resize(400, 400);rotatingImage->show();return app.exec();
} 

3| 結語

Qt 的動畫系統提供了豐富的 API，可以方便地實現旋轉動畫。本文介紹了 QPropertyAnimation 的基礎用法、QWidget 的 QPainter 旋轉方法，以及更高級的優化方案。希望這些內容能幫助你在實際開發中更好地使用 Qt 動畫！
源碼地址：https://github.com/MingYueRuYa/QtDemo