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

房东的猫 提交于 2020-03-07 17:25:38

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

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!