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