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