QQuickWidget + QML编程实现酷炫动态动画效果

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_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

来源：CSDN

作者：smile_sambery

链接：https://blog.csdn.net/xx18030637774/article/details/104716506

标签

qml

signal