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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/382248.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Qt中的四种信号与槽的连接方式

1. UI界面右键点击控件&#xff0c;选择“转到槽“&#xff0c;系统会在cpp中自动添加这个组件对应的槽函数 2.在Ui界面的下面 siga如l & slot editor栏中手动添加 3.在代码中使用connect显示添加 4. 使用on_对象名_事件名隐式连接&#xff0c;以QPushButton为例 QPushBut…

解决QTreeWidget中item无法整行同时显示相同颜色

对于QTreeWidget来说&#xff0c;继承自QTreeView&#xff0c;因此设计QTreeWidget中的样式设计&#xff0c;归根结底是对QTreeView的样式设计&#xff0c;而对于QTreeView中item样式设计&#xff0c;可以分为对branch和item设计&#xff0c;另外QT Style Sheet可以通过设置sho…

Qt自定义对话框中边框阴影实现

1. 对于Window系统或者Unix系统&#xff0c;QDialog有一个默认的边框(样式看起来有点复古)&#xff0c;不过Qt可以提供自定义的边框设计&#xff0c;通过设置对话框相关属性&#xff1a; setWindowFlags(Qt::Dialog | Qt:: FramelessWindowHint); //设置不适应默认边框 setAt…

从mice到missForest:常用数据插值方法优缺点

一、引言 数据插值方法在数据处理和分析中扮演着至关重要的角色。它们可以帮助我们处理缺失数据&#xff0c;使得数据分析更加准确和可靠。数据插值方法被广泛应用于金融、医疗、社会科学等领域&#xff0c;以及工程和环境监测等实际应用中。 在本文中&#xff0c;我们将探讨三…

22. 括号生成 golang 图解

题目 括号生成 给出 n 代表生成括号的对数&#xff0c;请你写出一个函数&#xff0c;使其能够生成所有可能的并且有效的括号组合。 例如&#xff0c;给出 n 3&#xff0c;生成结果为&#xff1a; [ “((()))”, “(()())”, “(())()”, “()(())”, “()()()” ] 解法 f…

279. 完全平方数 golang BFS

题目 完全平方数 给定正整数 n&#xff0c;找到若干个完全平方数&#xff08;比如 1, 4, 9, 16, …&#xff09;使得它们的和等于 n。你需要让组成和的完全平方数的个数最少。 示例 1: 输入: n 12 输出: 3 解释: 12 4 4 4. 示例 2: 输入: n 13 输出: 2 解释: 13 4 9…

343. 整数拆分 golang 动态规划

题目 整数拆分 给定一个正整数 n&#xff0c;将其拆分为至少两个正整数的和&#xff0c;并使这些整数的乘积最大化。 返回你可以获得的最大乘积。 示例 1: 输入: 2 输出: 1 解释: 2 1 1, 1 1 1。 示例 2: 输入: 10 输出: 36 解释: 10 3 3 4, 3 3 4 36。 说明: 你…

279. 完全平方数 golang 动态规划

题目 类似题目&#xff1a;322. 零钱兑换 279. 完全平方数 给定正整数 n&#xff0c;找到若干个完全平方数&#xff08;比如 1, 4, 9, 16, …&#xff09;使得它们的和等于 n。你需要让组成和的完全平方数的个数最少。 示例 1: 输入: n 12 输出: 3 解释: 12 4 4 4. 示例…

动态规划-01背包问题详解

read&#xff0c;write&#xff0c;comprehend

138. 复制带随机指针的链表 golang

138. 复制带随机指针的链表 这个题结构体特殊&#xff0c;需要更改上一篇博客的node结构体 给定一个链表&#xff0c;每个节点包含一个额外增加的随机指针&#xff0c;该指针可以指向链表中的任何节点或空节点。 要求返回这个链表的 深拷贝。 我们用一个由 n 个节点组成的链表…

160. 相交链表 golang

160. 相交链表 计算两个链表长度&#xff0c;让长的先走到两个链表一样长&#xff0c;然后找交点 编写一个程序&#xff0c;找到两个单链表相交的起始节点。 如下面的两个链表&#xff1a; 在节点 c1 开始相交。 示例 1&#xff1a; 输入&#xff1a;intersectVal 8, li…

141. 环形链表 golang

141. 环形链表 给定一个链表&#xff0c;判断链表中是否有环。 为了表示给定链表中的环&#xff0c;我们使用整数 pos 来表示链表尾连接到链表中的位置&#xff08;索引从 0 开始&#xff09;。 如果 pos 是 -1&#xff0c;则在该链表中没有环。 示例 1&#xff1a; 输入&a…

237. 删除链表中的节点 golang

删除链表的节点 https://leetcode-cn.com/problems/delete-node-in-a-linked-list 最优解 把下一个节点的值移动到当前删除节点&#xff0c;然后更改当前节点的Next node.Val node.Next.Valnode.Next node.Next.Nextother p.next p.next.next即可达到删除的目的 /*** Defi…

958. 二叉树的完全性检验 golang

958. 二叉树的完全性检验 给定一个二叉树&#xff0c;确定它是否是一个完全二叉树。 百度百科中对完全二叉树的定义如下&#xff1a; 若设二叉树的深度为 h&#xff0c;除第 h 层外&#xff0c;其它各层 (1&#xff5e;h-1) 的结点数都达到最大个数&#xff0c;第 h 层所有的…

42. 接雨水 golang

42. 接雨水 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图&#xff0c;计算按此排列的柱子&#xff0c;下雨之后能接多少雨水。 上面是由数组 [0,1,0,2,1,0,1,3,2,1,2,1] 表示的高度图&#xff0c;在这种情况下&#xff0c;可以接 6 个单位的雨水&#xff08;蓝色部分表…

HDU中一些DP的题目分类

DP是难点&#xff0c;供自已以后系统学习。 1.Robberies 连接 &#xff1a;http://acm.hdu.edu.cn/showproblem.php?pid2955 背包;第一次做的时候把概率当做背包(放大100000倍化为整数):在此范围内最多能抢多少钱 最脑残的是把总的概率以为是抢N家银行的概率之和… 把状…

11. 盛最多水的容器 golang

11. 盛最多水的容器 &#xff08;一道比较特殊的题&#xff09; 之所以说特殊是因为这个题用动态规划反而比暴力破解法还复杂。 这种容器的题&#xff0c;就是前后指针方向。尽量别考虑别的思路。 11. 盛最多水的容器 给你 n 个非负整数 a1&#xff0c;a2&#xff0c;…&#…

LeetCode 303,560,1248 (前缀求和 )

303. 区域和检索 - 数组不可变 给定一个整数数组 nums&#xff0c;求出数组从索引 i 到 j (i ≤ j) 范围内元素的总和&#xff0c;包含 i, j 两点。 示例&#xff1a; 给定 nums [-2, 0, 3, -5, 2, -1]&#xff0c;求和函数为 sumRange() sumRange(0, 2) -> 1 sumRange…

分布式是写出来的(二)

从单机存储进化为接口和存储的分离 概述 接口服务层对外提供REST服务&#xff0c;数据服务层提供数据存储功能。两者之间通过消息队列进行通信&#xff0c;数据服务层的所有数据服务注册dataServer Exchange&#xff0c; 以便client给接口服务层发消息后&#xff0c;接口服务…

分布式是写出来的(五)

数据冗余策略 RS(Reed Solomon Coding)纠删码 在存储系统中&#xff0c;需要采用数据冗余技术来保证数据的可靠性&#xff0c;相比使用多副本复制机外&#xff0c;使用纠删码能够以更小的数据冗余度获得更高的数据可靠性。 RS纠删码将原文件分成n个数据块&#xff0c;同时为这…