1.具體需求：當Qt開發項目中需要實現簡單的動態酷炫動畫效果時，我們可以使用Qt中的QQuickWidget來實現，同時還可以使用QML編程來實現具體的動畫效果，具體實現的效果如下所示：

2.具體操作和實現效果圖：

?????? 1）按下start按鈕，音樂播放界面開始播放，然后出現旋轉界面（界面的變化可以通過QML編程來具體實現）；

??????? 2)? 按下stop按鈕，音樂播放界面停止；

??????? 3）效果圖：（樣式沒有刻意去設計，QML只是簡單的旋轉效果）

?stop下的狀態圖：

開始播放的狀態圖：

3.具體代碼實現分為三部分：

?????????? 1）Qt的pro工程文件中加入QQuickWidget功能： QT? +=? quickwidgets

?????????? 2）新建一個工程簡單的工程，如下所示：

?????????? 在工程中添加一個resource新文件，鼠標右鍵單擊工程->添加新文件->Qt->Qt Resource File，然后在resource file下新建一個目錄(add prefix)，添加一個QML File(Qt Quick 2)文件，取名字為musicPlay.qml，操作步驟和前面一樣，添加相關的QML代碼，具體如下：

import QtQuick 2.0Item { //首字母大寫visible: truewidth: 150height: 150id: rectangleWidgetscale : 1.0signal sig_startMusic(); //定義四個信號，來和Qt中的具體信號建立連接signal sig_stopMusic();signal sig_musicEnable();signal sig_musicDisable();function startAnimation() { //類似于槽函數numberAnimationInf.start();}function stopAnimation() {numberAnimationInf.stop();}function setMusicEnable() {musicEnable.visible = true;numberAnimationOnce.start();musicDisable.visible = false;}function setMusicDisable() {musicEnable.visible = false;musicDisable.visible = true;}Image {id: musicEnablex : 0y : 0width : 80height: 80source: "qrc:/music_enable.svg" //所有的svg圖標可以從aliicon庫中下載sourceSize.height: 80sourceSize.width: 80transformOrigin: Item.Centervisible: truesmooth: trueNumberAnimation on rotation { //設置動態樣式為一直動態旋轉id : numberAnimationInffrom: 0to : 360duration: 10000loops: Animation.Infiniterunning: false}NumberAnimation on rotation { //旋轉一次，來切換disable和enable的狀態id : numberAnimationOncefrom: 0to : 360duration: 1loops: 1running: false}}Image {id: musicDisablex : 0y : 0width : 80height: 80source: "qrc:/music_disable.svg"sourceSize.height: 80sourceSize.width: 80visible: truesmooth: true}Component.onCompleted: { //連接圖片中的信號和QML對外信號，從而達到Qt界面信號控制動畫的效果rectangleWidget.sig_startMusic.connect(rectangleWidget.startAnimation);rectangleWidget.sig_stopMusic.connect(rectangleWidget.stopAnimation);rectangleWidget.sig_musicEnable.connect(rectangleWidget.setMusicEnable);rectangleWidget.sig_musicDisable.connect(rectangleWidget.setMusicDisable);} }

?????? 打開mainwindow.ui界面，在界面左側拖入一個QQuickWidget和兩個QPushButton，將兩個按鈕的pushbutton改名為start和stop,修改QQuickWidget的相關屬性，設置resizeMode屬性為SizeRootObjectToView,同時添加source為上文中的qml文件，

????? 3）在mainwindow.cpp/mainwindow.h中添加相關的信號與槽函數實現相關功能：

???????????? mainwindow.h代碼：

#ifndef MAINWINDOW_H #define MAINWINDOW_H#include <QMainWindow>namespace Ui { class MainWindow; }class MainWindow : public QMainWindow {Q_OBJECTpublic:explicit MainWindow(QWidget *parent = 0);~MainWindow(); signals:void sig_musicStart();void sig_musicStop();void sig_enableMusic();void sig_disableMusic(); private slots:void on_pushButtonStart_clicked();void on_pushButtonStop_clicked(); private:Ui::MainWindow *ui; };#endif // MAINWINDOW_H

??? mainwindow.cpp代碼：

#include "mainwindow.h" #include "ui_mainwindow.h" #include <QQuickItem>MainWindow::MainWindow(QWidget *parent) :QMainWindow(parent),ui(new Ui::MainWindow) {ui->setupUi(this);QQuickItem *item = ui->quickWidget->rootObject();connect(this, SIGNAL(sig_musicStart()), item, SIGNAL(sig_startMusic())); //和QML之間的信號連接connect(this, SIGNAL(sig_musicStop()), item, SIGNAL(sig_stopMusic()));connect(this, SIGNAL(sig_enableMusic()), item, SIGNAL(sig_musicEnable()));connect(this, SIGNAL(sig_disableMusic()), item, SIGNAL(sig_musicDisable()));connect(ui->pushButton, SIGNAL(clicked()), this, SLOT(on_pushButtonStart_clicked()));connect(ui->pushButton_2, SIGNAL(clicked()), this, SLOT(on_pushButtonStop_clicked())); }MainWindow::~MainWindow() {delete ui; }void MainWindow::on_pushButtonStart_clicked() {emit sig_enableMusic();emit sig_musicStart(); }void MainWindow::on_pushButtonStop_clicked() {emit sig_musicStop();emit sig_disableMusic(); }

3.編譯環境：Qt 4.3.0 + MinGW(msvc 2015 32bit)

4. 代碼工程免費下載地址: https://download.csdn.net/my

總結

以上是生活随笔為你收集整理的QQuickWidget + QML编程实现酷炫动态动画效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。