Qt之模仿网易云音乐 广告Banner

最新推荐文章于 2023-02-17 11:25:31 发布
原创 最新推荐文章于 2023-02-17 11:25:31 发布 · 712 阅读 · 9 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#C++ #Qt #网易云 #Banner

本文详细介绍了一种基于Qt的网易云音乐风格广告Banner的实现方法，包括代码示例和使用说明。通过自定义控件和动画效果，实现了图片轮播功能，适用于需要展示多张图片的应用场景。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

文章目录

环境

vs2013 + Qt5.6.2

代码

NetEasyBanner.h

#ifndef NETEASYBANNER_H
#define NETEASYBANNER_H

#include <QWidget>
#include <QPixmap>
#include <QList>
#include <QPropertyAnimation>
#include <QParallelAnimationGroup>		//	动画并行

enum emAnimationType
{
	UnKnow = -1,
	Next = 0,
	Prev = 1,
	Jump,
};

class QNetEasyBanner : public QWidget
{
	Q_OBJECT

public:
	QNetEasyBanner(QWidget *parent);
	~QNetEasyBanner();

public:
	void addImage(const QString& image);

	public slots:
	void onNext();

	void onPrev();

	void onJump(int index);

protected:
	void paintEvent(QPaintEvent *event);

private:

	void drawLeft(QPainter* painter);

	void drawCenter(QPainter* painter);

	void drawRight(QPainter* painter);

	QImage getGrayImage(const QImage& image);

private slots:
	void slot_ValueChanged(const QVariant& value);
	void slot_finished();

private:
	QStringList x_imageList;
	int x_index;
	bool x_isAnimation;
	QParallelAnimationGroup* x_pAnimationGroup;
	QPropertyAnimation* x_pLeftAnimation;
	QPropertyAnimation* x_pCenterAnimation;
	QPropertyAnimation* x_pRightAnimation;
	emAnimationType x_animationType;

	QRect x_leftRect, x_centerRect, x_rightRect;
};

#endif // NETEASYBANNER_H

NetEasyBanner.cpp

#include "NetEasyBanner.h"

#include <QPainter >
#include <QApplication>
#include <QDebug>

QNetEasyBanner::QNetEasyBanner(QWidget *parent)
	: QWidget(parent)
{
	setCursor(Qt::PointingHandCursor);

	resize(770, 200);
	x_isAnimation = false;
	x_index = 0;
	x_animationType = emAnimationType::UnKnow;

	x_pLeftAnimation = new QPropertyAnimation(this, "");
	x_pCenterAnimation = new QPropertyAnimation(this, "");
	x_pRightAnimation = new QPropertyAnimation(this, "");

	x_pAnimationGroup = new QParallelAnimationGroup(this);

	x_pLeftAnimation->setDuration(300);
	x_pCenterAnimation->setDuration(300);
	x_pRightAnimation->setDuration(300);

	x_pAnimationGroup->addAnimation(x_pLeftAnimation);
	x_pAnimationGroup->addAnimation(x_pCenterAnimation);
	x_pAnimationGroup->addAnimation(x_pRightAnimation);

	connect(x_pLeftAnimation, SIGNAL(valueChanged(const QVariant &)), this, SLOT(slot_ValueChanged(const QVariant&)));
	connect(x_pCenterAnimation, SIGNAL(valueChanged(const QVariant &)), this, SLOT(slot_ValueChanged(const QVariant&)));
	connect(x_pRightAnimation, SIGNAL(valueChanged(const QVariant &)), this, SLOT(slot_ValueChanged(const QVariant&)));
	connect(x_pCenterAnimation, SIGNAL(finished()), this, SLOT(slot_finished()));
}

QNetEasyBanner::~QNetEasyBanner()
{

}

void QNetEasyBanner::addImage(const QString& image)
{
	x_imageList.append(image);
}

void QNetEasyBanner::onNext()
{
	if (!x_isAnimation)
	{
		x_animationType = emAnimationType::Next;
		x_isAnimation = true;

		x_pLeftAnimation->setStartValue(QRect(115, 0, 540, 200));
		x_pLeftAnimation->setEndValue(QRect(0, 10, 503, 190));

		x_pCenterAnimation->setStartValue(QRect(267, 10, 503, 190));
		x_pCenterAnimation->setEndValue(QRect(115, 0, 540, 200));

		x_pRightAnimation->setStartValue(QRect(152, 10, 503, 190));
		x_pRightAnimation->setEndValue(QRect(267, 10, 503, 190));

		x_pLeftAnimation->start();
		x_pRightAnimation->start();
		x_pCenterAnimation->start();
	}
}

void QNetEasyBanner::onPrev()
{
	if (!x_isAnimation)
	{
		x_animationType = emAnimationType::Prev;
		x_isAnimation = true;

		x_pLeftAnimation->setStartValue(QRect(115, 10, 503, 190));
		x_pLeftAnimation->setEndValue(QRect(0, 10, 503, 190));

		x_pCenterAnimation->setStartValue(QRect(0, 10, 503, 190));
		x_pCenterAnimation->setEndValue(QRect(115, 0, 540, 200));

		x_pRightAnimation->setStartValue(QRect(115, 0, 540, 200));
		x_pRightAnimation->setEndValue(QRect(267, 10, 503, 190));

		x_pLeftAnimation->start();
		x_pRightAnimation->start();
		x_pCenterAnimation->start();

		update();
	}
}

void QNetEasyBanner::onJump(int index)
{
	if (!x_isAnimation)
	{
		if (index < x_imageList.size())
		{
			x_index = index;
		}
		else
		{
			return;
		}
		x_index = index;

		x_animationType = Jump;
		x_isAnimation = true;

		x_pLeftAnimation->setStartValue(QRect(115, 10, 503, 190));
		x_pLeftAnimation->setEndValue(QRect(0, 10, 503, 190));

		x_pCenterAnimation->setStartValue(QRect(this->rect().center().x(), this->rect().center().y(), 0, 0));
		x_pCenterAnimation->setEndValue(QRect(115, 0, 540, 200));

		x_pRightAnimation->setStartValue(QRect(115, 10, 503, 190));
		x_pRightAnimation->setEndValue(QRect(267, 10, 503, 190));

		x_pLeftAnimation->start();
		x_pRightAnimation->start();
		x_pCenterAnimation->start();

		update();
	}
}

void QNetEasyBanner::paintEvent(QPaintEvent *event)
{
	QPainter painter(this);

	painter.setRenderHint(QPainter::Antialiasing);

	if (x_imageList.count() < 3)
	{
		painter.drawText(this->geometry(), Qt::AlignCenter, QString::fromLocal8Bit("要求3张图片以上"));
	}
	else
	{
		drawLeft(&painter);

		drawRight(&painter);

		drawCenter(&painter);
	}
}

void QNetEasyBanner::drawLeft(QPainter* painter)
{
	
	painter->save();
	if (!x_isAnimation)
	{
		int _leftIndex = (x_index + x_imageList.size() - 1) % x_imageList.size();
		QImage _leftImage = QImage(x_imageList.at(_leftIndex)).scaled(503, 190);
		painter->drawImage(QRect(0, 10, 503, 190), getGrayImage(_leftImage));
	}
	else 
	{
		if (x_animationType == Next)
		{
			QImage _leftImage = QImage(x_imageList.at(x_index)).scaled(503, 190);
			painter->drawImage(x_leftRect, getGrayImage(_leftImage));
		}
		else if (x_animationType == Prev)
		{
			int _leftIndex = (x_index + x_imageList.size() - 2) % x_imageList.size();
			QImage _leftImage = QImage(x_imageList.at(_leftIndex)).scaled(503, 190);
			painter->drawImage(x_leftRect, getGrayImage(_leftImage));
		}
		else if (x_animationType == Jump)
		{
			int _leftIndex = (x_index + x_imageList.size() - 1) % x_imageList.size();
			QImage _leftImage = QImage(x_imageList.at(_leftIndex)).scaled(503, 190);
			painter->drawImage(x_leftRect, getGrayImage(_leftImage));
		}
	}

	painter->restore();
}

void QNetEasyBanner::drawCenter(QPainter* painter)
{
	painter->save();
	if (!x_isAnimation)
	{
		painter->drawImage(QRect(115, 0, 540, 200), QImage(x_imageList.at(x_index)));
	}
	else
	{
		if (x_animationType == Next)
		{
			int _centerIndex = (x_index + x_imageList.size() + 1) % x_imageList.size();
			QImage _centerImage = QImage(x_imageList.at(_centerIndex));
			painter->drawImage(x_centerRect, _centerImage);
		}
		else if (x_animationType == Prev)
		{
			int _centerIndex = (x_index + x_imageList.size() - 1) % x_imageList.size();
			QImage _centerImage = QImage(x_imageList.at(_centerIndex));
			painter->drawImage(x_centerRect, _centerImage);
		}
		else if (x_animationType == Jump)
		{
			painter->drawImage(x_centerRect, QImage(x_imageList.at(x_index)));
		}
	}

	painter->restore();
}

void QNetEasyBanner::drawRight(QPainter* painter)
{
	painter->save();
	if (!x_isAnimation)
	{
		int _rightIndex = (x_index + x_imageList.size() + 1) % x_imageList.size();
		QImage _rightImage = QImage(x_imageList.at(_rightIndex)).scaled(503, 190);
		painter->drawImage(QRect(267, 10, 503, 190), getGrayImage(_rightImage));
	}
	else
	{
		if (x_animationType == Next)
		{
			int _rightIndex = (x_index + x_imageList.size() + 2) % x_imageList.size();
			QImage _rightImage = QImage(x_imageList.at(_rightIndex)).scaled(503, 190);
			painter->drawImage(x_rightRect, getGrayImage(_rightImage));
		}
		else if (x_animationType == Prev)
		{
			QImage _rightImage = QImage(x_imageList.at(x_index)).scaled(503, 190);
			painter->drawImage(x_rightRect, getGrayImage(_rightImage));
		}
		else if (x_animationType == Jump)
		{
			int _rightIndex = (x_index + x_imageList.size() + 1) % x_imageList.size();
			QImage _rightImage = QImage(x_imageList.at(_rightIndex)).scaled(503, 190);
			painter->drawImage(x_rightRect, getGrayImage(_rightImage));
		}
	}

	painter->restore();
}

QImage QNetEasyBanner::getGrayImage(const QImage& image)
{
	int w, h;
	w = image.width();
	h = image.height();

	QImage iGray(w, h, QImage::Format_RGB32);

	for (int i = 0; i < w; i++)
	{
		for (int j = 0; j < h; j++)
		{
			QRgb pixel = image.pixel(i, j);
			int gray = qGray(pixel);
			QRgb grayPixel = qRgb(gray, gray, gray);
			iGray.setPixel(i, j, grayPixel);
		}
	}
	return iGray;
}

void QNetEasyBanner::slot_ValueChanged(const QVariant& value)
{
	QPropertyAnimation* _obj = (QPropertyAnimation*)(sender());

	if (_obj == x_pLeftAnimation)
	{
		qDebug() << "left "<< value.toRect();
		x_leftRect = value.toRect();
	}
	else if (_obj == x_pCenterAnimation)
	{
		qDebug() << "Center " << value.toRect();
		x_centerRect = value.toRect();
	}
	else if (_obj == x_pRightAnimation)
	{
		qDebug() << "Right " << value.toRect();
		x_rightRect = value.toRect();
	}

	update();
}

void QNetEasyBanner::slot_finished()
{
	if (x_animationType == Next)
	{
		x_index = (x_index + 8 + 1) % 8;
	}
	else if (x_animationType == Prev)
	{
		x_index = (x_index + 8 - 1) % 8;
	}
	
	x_isAnimation = false;
}

使用

 	x_pNetEasyBanner = new QNetEasyBanner(ui.frame);

	x_pNetEasyBanner->addImage(":/image/1");
	x_pNetEasyBanner->addImage(":/image/2");
	x_pNetEasyBanner->addImage(":/image/3");
	x_pNetEasyBanner->addImage(":/image/4");
	x_pNetEasyBanner->addImage(":/image/5");
	x_pNetEasyBanner->addImage(":/image/6");
	x_pNetEasyBanner->addImage(":/image/7");
	x_pNetEasyBanner->addImage(":/image/8");

	connect(ui.btn_left, SIGNAL(clicked()), x_pNetEasyBanner, SLOT(onPrev()));
	connect(ui.btn_right, SIGNAL(clicked()), x_pNetEasyBanner, SLOT(onNext()));
	connect(ui.btn_jump, SIGNAL(clicked()), this, SLOT(slot_jump()));

效果

在这里插入图片描述

代码分享

Qt模仿网易云音乐 广告Banner

用qt做网易云音乐--轮播图实现（1）
weixin_51965272的博客
03-24 1297
这个轮播图可是废了我好大的劲，因为网上用qt做轮播图的很少，大多都是html和js，找到一些大神做的轮播图，有点不符合预期，有的太复杂(不是我看不懂，是无用的代码有点多)，于是，我这里秉着能减就减的原则，在我能力范围内用少的代码做出了轮播图，给大家看下成果 banner 这里是用QGraphicsView，QGraphicsScent，以及自定义了一个QGraphicsItem做的，动画
用qt做网易云音乐--源代码
weixin_51965272的博客
04-01 1603
之前由于太忙，没有继续写了，所以把已完成的代码上传到git，给大家分享 先看下目前完成的成果 有些部分模块实现的方法我写在之前的博客里了，还有些都是相似的功能，大家看看源代码理解一下，如果有哪些地方不懂，可以私信我，我看到会解答的 git链接：https://e.coding.net/hhpweb/wyymusic/wyymusic.git 有需要的小伙伴可以下载哦 如果大家觉得对你们帮助的话，可以关注下我博客，顺手点个赞哦 ...
Qt高仿网易云音乐界面源码
08-20
Qt高仿网易云音乐界面源码，Qt界面美化，Qt项目源码。
Qt模仿网易云音乐 广告Banner
10-22
模仿网易云音乐的广告banner，采用vs2013 + qt5.5.2，实现相识的功能与效果。
QT简单音乐播放器（访网易云）
08-11
就是一个音乐播放器，写的不完整，适合新手。
Qt模仿网易云音乐
番茄炒蛋不要蛋
12-27 5463
     本人非常钟爱网易云音乐这款软件，学习了Qt编程之后，萌生了模仿网易云音乐的这么一个想法，于是忙了一个多月终于写出来了样子，只实现了以下的几个功能。 1.能播放歌曲，（Qt自身的限制，对部分mp3文件无法解析，播放无法解析的文件时会崩溃）； 2.能加载音乐列表，用TXT文件的形式加载； 3.模仿了黑胶片的经典播放界面； 4.自己重写了进度条，支持音乐的快进； 5.能在歌曲中解析出...
基于Qt模仿网易云音乐播放器
RDC01的博客
01-25 1624
基于Qt模仿网易云音乐界面，目前只实现了部分界面，后续继续完善改造。 部分代码: #ifndef MYSQLDATAMGR_H #define MYSQLDATAMGR_H #include <QObject> #include <QDebug> #include <QSqlDatabase> #include <QSqlQuery> /** * @brief The MySqlDataMgr class * 数据库管理类 */ class My..
Qt/C++模仿酷狗音乐播放器执行文件
12-19
使用了ffmpeg 可以播放MV 和音频 ,觉得好 ,链接里有源码下载。源码发到了github上了 详情看我的博客：http://blog.youkuaiyun.com/what951006/article/details/51762463
qml之从零开始编写网易云音乐（一）
小李的博客
04-11 2602
初步实现无边框窗口，以及左边的导航栏，效果如下：主要包括无边框窗体以及左边的导航栏。无边框窗体设计思路：1、主窗体设置无边框属性。flags:Qt.FramelessWindowHint | Qt.Window;2、标题栏拖拽移动。 MouseArea{ property real xmouse; //鼠标的x轴坐标 property real ymous...
Qt -仿照网易云音乐设置界面
J 的博客
04-09 762
源码：https://gitee.com/ALONE_WORK/QtCeShiXiangMu 功能介绍 仿照网易云音乐设置界面实现滚动显示设置界面 使用 QSS 设置滚动区域样式 使用按钮快速定位 动图效果 ...
Qt---网易云音乐
12-27
Qt开发的Windows网易云音乐
一个基于QT + ffpemg仿网易云UI的音乐播放器项目，支持桌面歌词
最新发布
10-13
一个基于QT + ffpemg仿网易云UI的音乐播放器项目，支持桌面歌词
qt5高仿网易酷狗音乐Mp3播放器（含金量极高）
11-10
qt5高仿网易酷狗音乐Mp3播放器（含金量极高），绝对值50分，相信不用我多说大家都知道是干什么的，开发者都知道，辛苦整理的这个资源，希望大家喜欢，希望对大家有帮助，谢谢大家，请给个五星好评，谢谢啦！
仿淘宝、网易等广告条banner效果
09-15
这个Demo的效果是作者根据自身的项目经验，从实际项目中抽取出来的单独小功能模块，觉得这个广告条在商业开发中用的比较广告，故提供之，有关技术博客，请参考： http://blog.youkuaiyun.com/allen315410/article/details/39294343
基于QT复刻网易云音乐播放器--(1)建立工程与主界面
weixin_54206483的博客
02-17 1033
今天我们快速建立一个Qt工程，然后复刻主界面工程配置：基类选择QMainWindow,其余默认。
Qt音乐进度条的实现仿网易云音乐
番茄炒蛋不要蛋
03-19 4589
Qt网易云音乐中的音乐进度条是一个小小的难关，今天在Android写记录步数进度条中突然想到了它。移动端和电脑端自定义写界面模块的方式大同小异，现在将其中的代码放出，供大家点评参阅。代码还是比较混乱，请各位大侠还是要多多包涵。 其中我把这个类打包出来，类的实现就是靠painevent来完成的。其中的两个自定义信号是为了快进快退而准备的，它们的实现不在本类中，大小位置也是在外部类中实现。其中的一些
用qt做网易云音乐--画廊实现
weixin_51965272的博客
04-01 493
qt画廊采用子控件最多显示父控件大小的原理，采用move函数进行，再加QPropertyAnimation动画进行操作 下面上下最终成品 以下是成员变量 int m_currentShowGalleryFirstIndex; int m_currentShowGalleryLastIndex; 由于向左或向右移动时，要有标志来确定是否到最左或最右来判断还能否移动，这里定义两个索引用来判断位置 int m_galleryItemCount; 项总数,总数*（每个项宽度+项间
用qt做网易云音乐--01标题栏实现
weixin_51965272的博客
03-10 560
把mainwindow的默认样式去掉，只留下无边框窗体 实现鼠标左键拖拽功能 #include "mainwindow.h" #include "ui_mainwindow.h" #include <QPainter> #include <QFile> #include <QMouseEvent> MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent), ui(new Ui::Main
用qt做网易云音乐--轮播图实现（2）
weixin_51965272的博客
03-24 927
窗体设计大概是这样 前面我们写到这里，接下来继续 这里的要点，每张图片的位置不同，每张图片的大小不同，没张图片显示的层级不同（就是图片重叠的情况下优先展示的）我们先看这几点，我这里把每张图片的这些特点都写进了list集合，这里详细介绍下 QList<int> m_ZValueList; //每张图片优先级的list,设置那张图片在上那张在下,如同raise()和lower()效果 QList<qreal> m_PixmapScaleList; //每张图片的缩放比例list.
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值