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.0
Item { //首字母大写
visible: true
width: 150
height: 150
id: rectangleWidget
scale : 1.0
signal 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: musicEnable
x : 0
y : 0
width : 80
height: 80
source: "qrc:/music_enable.svg" //所有的svg图标可以从aliicon库中下载
sourceSize.height: 80
sourceSize.width: 80
transformOrigin: Item.Center
visible: true
smooth: true
NumberAnimation on rotation { //设置动态样式为一直动态旋转
id : numberAnimationInf
from: 0
to : 360
duration: 10000
loops: Animation.Infinite
running: false
}
NumberAnimation on rotation { //旋转一次，来切换disable和enable的状态
id : numberAnimationOnce
from: 0
to : 360
duration: 1
loops: 1
running: false
}
}
Image {
id: musicDisable
x : 0
y : 0
width : 80
height: 80
source: "qrc:/music_disable.svg"
sourceSize.height: 80
sourceSize.width: 80
visible: true
smooth: 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_OBJECT
public:
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_Hmainwindow.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
