《Qt动画编程实战：轻松实现头像旋转效果》

《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