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_OBJECT

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

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    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");

    // 设置图片到QLabel
    ui->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 Image

def 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)
    
    # 保存为PNG
    img_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_NAMESPACE

class FanWidget : public QWidget
{
    Q_OBJECT

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