Qt中实现让静态图片动起来，创建动画效果

在现代应用程序开发中，动画效果是提升用户体验的重要元素之一。Qt作为一个强大的跨平台应用程序框架，提供了丰富的工具和库来创建各种动画效果。本文将介绍如何在Qt中使用静态图片创建动画效果。

实现方法一

使用QTimer和QPixmap

1.准备图片资源：

首先，确保你有一系列连续的静态图片，这些图片将构成动画帧。

将这些图片添加到Qt项目的资源文件中。

2.创建UI界面：

如果需要，可以在Qt Designer或代码中设计一个窗口用于显示动画。

3.编写动画类：

定义一个类，该类包含一个QLabel用于显示图片，以及一个QTimer用于控制动画帧的切换。

4.初始化图片：

在类的构造函数或初始化函数中，使用QPixmap加载图片资源，并存储到数组或其他数据结构中以便循环使用。

5.设置定时器：

设置QTimer的间隔时间，这将决定动画播放的速度。

连接定时器的timeout信号到槽函数，该槽函数负责切换到下一帧图片。

6.绘制图片：

在槽函数中，使用QLabel的setPixmap方法切换显示的图片。

可以通过索引递增来选择下一帧图片，并在到达最后一帧后循环回第一帧。

7.开始动画：

在适当的位置（比如窗口显示后），启动定时器。

示例代码：

#include <QApplication>
#include <QWidget>
#include <QLabel>
#include <QTimer>
#include <QPixmap>
#include <QResource>class AnimatedWidget : public QWidget {Q_OBJECTpublic:AnimatedWidget(QWidget *parent = nullptr) : QWidget(parent), currentFrame(0) {// 初始化QLabel用于显示图片QLabel *label = new QLabel(this);QVBoxLayout *layout = new QVBoxLayout(this);layout->addWidget(label);setLayout(layout);// 加载资源文件中的图片for (int i = 1; i <= frameCount; ++i) {QString fileName = QString(":/images/frame%1.png").arg(i, 2, 10, QLatin1Char('0'));frames.append(QPixmap(fileName));}// 设置定时器timer = new QTimer(this);connect(timer, &QTimer::timeout, this, &AnimatedWidget::nextFrame);timer->start(frameInterval); // 假设frameInterval为每帧间隔毫秒数// 显示第一帧label->setPixmap(frames[currentFrame]);}private slots:void nextFrame() {currentFrame = (currentFrame + 1) % frames.size();QLabel *label = findChild<QLabel*>("");if (label)label->setPixmap(frames[currentFrame]);}private:int currentFrame;QList<QPixmap> frames;QTimer *timer;const int frameCount = 10; // 图片帧数量const int frameInterval = 100; // 每帧间隔时间，例如100毫秒
};int main(int argc, char *argv[]) {QApplication a(argc, argv);AnimatedWidget w;w.show();return a.exec();
}

实现方法二

例如要让一张静态的风扇图片在Qt中旋转，可以使用动画框架中的QPropertyAnimation或QTimer配合QTransform来实现。以下是一个通过QTimer和QTransform实现旋转的示例。

首先，准备好风扇的静态图片，并确保您已经安装并配置好了Qt开发环境。

创建一个新的Qt Widgets应用程序项目。
在您的mainwindow.ui文件中添加一个QLabel控件，并设置其pixmap属性以显示风扇的图片。
在mainwindow.h文件中，定义一个QTimer对象和一个角度变量，用于控制图片的旋转：

#ifndef MAINWINDOW_H
#define MAINWINDOW_H#include <QMainWindow>
#include <QTimer>
#include <QPixmap>
#include <QTransform>QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACEclass MainWindow : public QMainWindow
{Q_OBJECTpublic:MainWindow(QWidget *parent = nullptr);~MainWindow();private slots:void rotateFan();private:Ui::MainWindow *ui;QTimer *timer;QPixmap fanPixmap;int angle;
};#endif // MAINWINDOW_H
在mainwindow.cpp文件中，初始化计时器和旋转逻辑：
#include "mainwindow.h"
#include "ui_mainwindow.h"MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindow), angle(0)
{ui->setupUi(this);// 加载风扇图片fanPixmap = QPixmap(":/path/to/your/fan/image.png");// 设置图片到QLabelui->label->setPixmap(fanPixmap);// 创建定时器对象timer = new QTimer(this);// 连接定时器的timeout信号到rotateFan槽函数connect(timer, &QTimer::timeout, this, &MainWindow::rotateFan);// 设置定时器每隔30毫秒触发一次timer->start(30);
}MainWindow::~MainWindow()
{delete ui;
}void MainWindow::rotateFan()
{// 更新轮转角度angle = (angle + 5) % 360;// 创建旋转变换QTransform transform;transform.rotate(angle);// 应用旋转并更新QLabel显示的图片QPixmap rotatedPixmap = fanPixmap.transformed(transform, Qt::SmoothTransformation);ui->label->setPixmap(rotatedPixmap);
}

在这个示例中，我们首先加载了风扇图片并设置到QLabel。接着创建一个QTimer对象，每隔30毫秒触发一次rotateFan槽函数。在rotateFan槽函数中，我们增加角度，然后使用QTransform对象对图片进行旋转，并将旋转后的图片设置回QLabel。

需要确保您的图片路径正确，您可以在项目配置文件中配置资源文件来简化路径管理。

通过这种方法，您可以轻松创建一个旋转的风扇效果。一些素材可以从网上获取，但是图片背景和颜色等可能都不如意，那么接下来介绍下Python的图片处理，可以不使用ps等图片处理工具的情况下，对素材进行一些简单的处理，如jpg转png实现背景透明效果，或者去除或跟换图片背景等。

Python的PIL库介绍

Python Imaging Library（PIL）是一个非常流行的Python库，用于处理图像。尽管它的名字仍然广泛使用，但实际上，PIL已经被其分支Pillow所取代，Pillow不仅提供了PIL的所有特性，还增加了更多功能和对最新Python版本的支持。下面是对Pillow库的基本介绍：

安装

Pillow可以通过pip轻松安装：

pip install Pillow

主要功能

Pillow库支持多种图像处理功能，包括但不限于：

读取和保存图像：支持多种图像格式，如JPEG、PNG、BMP、GIF、TIFF等。

基本操作：裁剪、旋转、翻转图像，调整图像大小，改变图像模式（如灰度、RGB、CMYK）。

颜色操作：调整亮度、对比度、色调、饱和度，以及应用各种滤镜和效果。

文字和图像合并：在图像上绘制文本或叠加其他图像。

图像分析：获取图像的元数据，统计直方图，进行基本的图像识别任务。

图像序列处理：处理动画GIF或连续帧图像。

高级功能：包括图像增强、格式转换、简单的图像识别和机器学习集成等。

常用类和方法

Image: 这是Pillow中最核心的类，用于打开、操作和保存图像。
Image.open: 用于打开图像文件。
Image.save: 保存图像到文件。
Image.show: 显示图像。
Image.resize: 改变图像尺寸。
Image.crop: 裁剪图像。
Image.rotate: 旋转图像。
Image.filter: 应用过滤器或效果到图像。
ImageDraw: 提供在图像上绘图的功能，如画线、圆、文本等。
ImageFont: 用于设置绘图时使用的字体。
ImageEnhance: 提供图像增强功能，如亮度、对比度、锐化等。

示例代码

from PIL import Image# 打开图像
img = Image.open('example.jpg')# 调整图像大小
img_resized = img.resize((800, 600))# 保存修改后的图像
img_resized.save('example_resized.jpg')# 显示图像
img.show()

JPG格式图片本身不支持透明度，因此不能直接保存为带有透明背景的图片。若要移除JPG图片的白色背景并使其透明，你需要先将图片转换为支持透明度的格式，如PNG，然后去除白色背景。

如果图片分辨率很大，你可以在去除白色背景之后，或者在处理之前，先调整图片的大小以适应你的需求。使用Pillow库，你可以很容易地实现图片的缩放。下面是在原有代码基础上增加图片尺寸。

调整的示例：

from PIL import Imagedef resize_and_remove_white_background(input_path, output_path, max_size=None):# 打开图片img = Image.open(input_path)# 如果指定了最大尺寸，则进行缩放if max_size:img.thumbnail(max_size, resample=Image.Resampling.LANCZOS)  # 使用LANCZOS代替ANTIALIAS进行高质量缩放# 转换为RGBA模式img = img.convert("RGBA")# 定义去除白色背景的函数def remove_white(pixel):if pixel[:3] == (255, 255, 255):  # 检查像素是否为白色return (255, 255, 255, 0)  # 设置为透明else:return pixel# 应用函数到每个像素img_data = img.getdata()new_data = list(map(remove_white, img_data))# 创建新图像并应用处理后的数据img_with_transparency = Image.new("RGBA", img.size)img_with_transparency.putdata(new_data)# 保存为PNGimg_with_transparency.save(output_path, "PNG")# 使用函数，传入图片路径、输出路径和可选的最大尺寸（例如，(800, 600)）
input_jpg = "fan.jpg"
output_png = "fan.png"
max_dimensions = (200, 200)  # 例子：最大宽度200，最大高度200
resize_and_remove_white_background(input_jpg, output_png, max_size=max_dimensions)
print(f"Image saved as: {output_png}")

实现风扇旋转效果

以下是我的自定义Widget实现的风扇旋转效果封装类：

#include "fanwidget.h"
#include <QTimer>
#include <QPainter>
#include <QTransform>FanWidget::FanWidget(QWidget *parent): QWidget(parent),angle_(0),isRotating_(false),rotationTimer_(new QTimer(this))
{QPixmap pixmap_ = QPixmap(":/image/fan.png"); // 确保路径正确if(pixmap_.isNull()){qDebug("pixmap_ is null");}if(!pixmap_.isNull()){// 获取Widget当前的宽度和高度int widgetWidth = width();int widgetHeight = height();// 计算图片显示的最大宽度和高度，以适应Widget的尺寸，同时保持宽高比int pixmapWidth = pixmap_.width();int pixmapHeight = pixmap_.height();float ratio = qMin(static_cast<float>(widgetWidth) / pixmapWidth,static_cast<float>(widgetHeight) / pixmapHeight);int scaledWidth = static_cast<int>(pixmapWidth * ratio);int scaledHeight = static_cast<int>(pixmapHeight * ratio);// 缩放图片scaledPixmap_1 = pixmap_.scaled(scaledWidth, scaledHeight, Qt::KeepAspectRatio, Qt::SmoothTransformation);}pixmap_ = QPixmap(":/image/fan1.png"); // 确保路径正确if(pixmap_.isNull()){qDebug("pixmap_ is null");}if(!pixmap_.isNull()){// 获取Widget当前的宽度和高度int widgetWidth = width();int widgetHeight = height();// 计算图片显示的最大宽度和高度，以适应Widget的尺寸，同时保持宽高比int pixmapWidth = pixmap_.width();int pixmapHeight = pixmap_.height();float ratio = qMin(static_cast<float>(widgetWidth) / pixmapWidth,static_cast<float>(widgetHeight) / pixmapHeight);int scaledWidth = static_cast<int>(pixmapWidth * ratio);int scaledHeight = static_cast<int>(pixmapHeight * ratio);// 缩放图片scaledPixmap_2 = pixmap_.scaled(scaledWidth, scaledHeight, Qt::KeepAspectRatio, Qt::SmoothTransformation);}connect(rotationTimer_, &QTimer::timeout, this, &FanWidget::rotateFan);
}FanWidget::~FanWidget()
{// 如果有资源需要清理，可以在这里做
}void FanWidget::startRotation()
{if (!isRotating_) {isRotating_ = true;rotationTimer_->start(30);}
}void FanWidget::stopRotation()
{if (isRotating_) {isRotating_ = false;rotationTimer_->stop();angle_ = 0;update();}
}void FanWidget::paintEvent(QPaintEvent *)
{QPainter painter(this);painter.translate(width() / 2, height() / 2);painter.rotate(angle_);if(!fanPixmap_.isNull()){// 获取Widget当前的宽度和高度int widgetWidth = width();int widgetHeight = height();// 计算图片显示的最大宽度和高度，以适应Widget的尺寸，同时保持宽高比int pixmapWidth = fanPixmap_.width();int pixmapHeight = fanPixmap_.height();float ratio = qMin(static_cast<float>(widgetWidth) / pixmapWidth,static_cast<float>(widgetHeight) / pixmapHeight);int scaledWidth = static_cast<int>(pixmapWidth * ratio);int scaledHeight = static_cast<int>(pixmapHeight * ratio);// 缩放图片QPixmap scaledPixmap = fanPixmap_.scaled(scaledWidth, scaledHeight, Qt::KeepAspectRatio, Qt::SmoothTransformation);// 根据缩放后的图片尺寸计算中心位置int x = (widgetWidth) / 2;int y = (widgetHeight) / 2;painter.drawPixmap(-x, -y, scaledPixmap);}//painter.drawPixmap(-fanPixmap_.width() / 2, -fanPixmap_.height() / 2, fanPixmap_);// 注意：背景颜色的控制逻辑也应该放在这里，具体实现见之前的说明
}// rotateFan槽函数的实现如果之前没有在.h中声明，则也应在此处定义
void FanWidget::rotateFan()
{if (isRotating_) {angle_ += 5;if (angle_ >= 360) angle_ -= 360;update();}
}

#include "fanwidget.h"
#include <QTimer>
#include <QPainter>
#include <QTransform>FanWidget::FanWidget(QWidget *parent): QWidget(parent),angle_(0),isRotating_(false),rotationTimer_(new QTimer(this))
{QPixmap pixmap_ = QPixmap(":/image/fan0.png"); // 确保路径正确if(pixmap_.isNull()){qDebug("pixmap_ is null");}if(!pixmap_.isNull()){// 获取Widget当前的宽度和高度int widgetWidth = width();int widgetHeight = height();// 计算图片显示的最大宽度和高度，以适应Widget的尺寸，同时保持宽高比int pixmapWidth = pixmap_.width();int pixmapHeight = pixmap_.height();float ratio = qMin(static_cast<float>(widgetWidth) / pixmapWidth,static_cast<float>(widgetHeight) / pixmapHeight);int scaledWidth = static_cast<int>(pixmapWidth * ratio);int scaledHeight = static_cast<int>(pixmapHeight * ratio);// 缩放图片scaledPixmap_1 = pixmap_.scaled(scaledWidth, scaledHeight, Qt::KeepAspectRatio, Qt::SmoothTransformation);}pixmap_ = QPixmap(":/image/fan1.png"); // 确保路径正确if(pixmap_.isNull()){qDebug("pixmap_ is null");}if(!pixmap_.isNull()){// 获取Widget当前的宽度和高度int widgetWidth = width();int widgetHeight = height();// 计算图片显示的最大宽度和高度，以适应Widget的尺寸，同时保持宽高比int pixmapWidth = pixmap_.width();int pixmapHeight = pixmap_.height();float ratio = qMin(static_cast<float>(widgetWidth) / pixmapWidth,static_cast<float>(widgetHeight) / pixmapHeight);int scaledWidth = static_cast<int>(pixmapWidth * ratio);int scaledHeight = static_cast<int>(pixmapHeight * ratio);// 缩放图片scaledPixmap_2 = pixmap_.scaled(scaledWidth, scaledHeight, Qt::KeepAspectRatio, Qt::SmoothTransformation);}connect(rotationTimer_, &QTimer::timeout, this, &FanWidget::rotateFan);
}FanWidget::~FanWidget()
{// 如果有资源需要清理，可以在这里做
}void FanWidget::startRotation()
{if (!isRotating_) {isRotating_ = true;rotationTimer_->start(30);}
}void FanWidget::stopRotation()
{if (isRotating_) {isRotating_ = false;rotationTimer_->stop();angle_ = 0;update();}
}void FanWidget::paintEvent(QPaintEvent *)
{QPainter painter(this);painter.translate(width() / 2, height() / 2);painter.rotate(angle_);QPixmap pixmap_;if (isRotating_){pixmap_ = scaledPixmap_1;}else {pixmap_ = scaledPixmap_2;}if(!pixmap_.isNull()){// 获取Widget当前的宽度和高度int widgetWidth = pixmap_.width();int widgetHeight = pixmap_.height();int x = (widgetWidth) / 2;int y = (widgetHeight) / 2;painter.drawPixmap(-x, -y, pixmap_);}
}// rotateFan槽函数的实现如果之前没有在.h中声明，则也应在此处定义
void FanWidget::rotateFan()
{if (isRotating_) {angle_ += 5;if (angle_ >= 360) angle_ -= 360;update();}
}void FanWidget::setScaledPixmap_1(const QPixmap &pixmap)
{int widgetWidth =width();int widgetHeight = height();// 计算图片显示的最大宽度和高度，以适应Widget的尺寸，同时保持宽高比int pixmapWidth = pixmap.width();int pixmapHeight = pixmap.height();float ratio = qMin(static_cast<float>(widgetWidth) / pixmapWidth,static_cast<float>(widgetHeight) / pixmapHeight);int scaledWidth = static_cast<int>(pixmapWidth * ratio);int scaledHeight = static_cast<int>(pixmapHeight * ratio);// 缩放图片QPixmap pixmap_ = pixmap.scaled(scaledWidth, scaledHeight, Qt::KeepAspectRatio, Qt::SmoothTransformation);scaledPixmap_1 = pixmap_;
}

#ifndef FANWIDGET_H
#define FANWIDGET_H#include <QWidget>
#include <QPixmap>QT_BEGIN_NAMESPACE
class QTimer;
class QPaintEvent;
class QPainter;
class QTransform;
QT_END_NAMESPACEclass FanWidget : public QWidget
{Q_OBJECTpublic:explicit FanWidget(QWidget *parent = nullptr);~FanWidget();void setScaledPixmap_1(const QPixmap &pixmap);public slots:void startRotation();void stopRotation();protected:void paintEvent(QPaintEvent *) override;private slots:void rotateFan();
private:QPixmap fanPixmap_;QPixmap scaledPixmap_1;QPixmap scaledPixmap_2;int angle_;QTimer *rotationTimer_;bool isRotating_;Q_DISABLE_COPY(FanWidget)
};
#endif // FANWIDGET_H