Qt之悬浮球菜单

这篇具有很好参考价值的文章主要介绍了Qt之悬浮球菜单。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、概述

最近想做一个炫酷的悬浮式菜单,考虑到菜单展开和美观,所以考虑学习下Qt的动画系统和状态机内容,打开QtCreator的示例教程浏览了下,大致发现教程中2D Painting程序和Animated Tiles程序有所帮助,如下图所示,这两个demo讲述了怎么做一个展开动画,感兴趣的同学也可以直接参考

Qt之悬浮球菜单

有了这两个demo之后,就可以开始动工写咱们自己的程序。

二、效果展示

如下两幅图就是作者失效的两个悬浮菜单效果图,展示图1代码已上传至CSDN,不需要积分即可下载,效果图2代码暂时不开源,有需要的朋友可以进一步咨询

基础圆形菜单功能,代码已上传CSDN - Qt 失效的 PC 端环形菜单、悬浮球菜单、展开动画

Qt之悬浮球菜单

高级悬浮球菜单、支持二级菜单打开

Qt之悬浮球菜单

三、实现代码

实现文件比较简单,只有头文件和实现文件,这里先主要放出头文件,然后讲解实现思路,具体实现细节可以通过下载源码进行具体了解

1、菜单项

PopRingItem为菜单展开项、可以通过绑定外部QAction实现与普通菜单相同功能

class PopRingItem : public QLabel
{
	Q_OBJECT

public:
	PopRingItem(QWidget *parent = 0);
	~PopRingItem();

	void SetRadius(int radius);
	int GetRadius() const;

	void BindAction(QAction * action);

signals:
	void MouseEvent(bool);

protected:
	virtual void enterEvent(QEvent * event) override;
	virtual void leaveEvent(QEvent * event) override;

	virtual void paintEvent(QPaintEvent * event) override;

protected:
	int m_iRadius = 50;
	QAction * m_actAction = nullptr;
};

2、悬浮球

悬浮球为菜单入口,继承自菜单项,与菜单项有相似功能

class QVariantAnimation;
class QPropertyAnimation;
class PopRingMenu : public PopRingItem
{
	Q_OBJECT

public:
	PopRingMenu(QWidget *parent = 0);
	~PopRingMenu();

signals:
	void DoubleClicked();

public:
	void SetActions(const QVector<QAction *> & acts);
	void SetIcons(const QVector<QString> & icons);

	void SetAnimationEnabled(bool enabled);
	bool IsAnimationEnabled() const;

	void SetSlowlyFade(bool enabled);
	bool IsSlowlyFade() const;

	void SetDistanced(int distance);
	int GetDistanced() const;

	void SetStartAngle(int angle);
	int GetStartAngle() const;

	void SetStepAngle(int angle);
	int GetStepAngle() const;

	void SetNormalMenuSize(int size);
	int GetNormalMenuSize() const;
	void SetNormalItemSize(int size);
	int GetNormalItemSize() const;

protected:
	virtual void enterEvent(QEvent * event) override;
	virtual void leaveEvent(QEvent * event) override;
	virtual void mouseDoubleClickEvent(QMouseEvent * event) override;

	virtual void timerEvent(QTimerEvent * event) override;
	virtual bool event(QEvent * event) override;

private slots:
	void OnMouseEvent(bool);

private:
	void UpdateActions(int msecond);

	void ExpandMenu();
	void CollapseMenu();

	void SlowlyFade();
	void QuicklyLighter();

	bool IsUnderMouse() const;

	void TryCollapseMenu();
	void KillHideTimer();

private:
	int m_iDistance = 70;
	int m_iStartAngle = 0;
	int m_iStepAngle = 60;

	int m_iMenuSize = 70;
	int m_iItemSize = 60;

	int m_iTimerID = -1;

	QPropertyAnimation * m_pOpacityAnimation = nullptr;
	QVariantAnimation * m_pItemAnimation = nullptr;
	QVector<PopRingItem *> m_items;
};

3、关键点

初始化动画对象,指定动画时长和动画起始、终止值

动画具体实现函数未UpdateAction,根据当前动画进度值在动画起始值和终止值所占比例,进行计算当前动画时刻菜单项的位置和大小

m_pItemAnimation = new QVariantAnimation(this);

m_pItemAnimation->setEasingCurve(QEasingCurve::InCubic);
m_pItemAnimation->setStartValue(ShowMenuStartValue);
m_pItemAnimation->setEndValue(ShowMenuEndValue);
m_pItemAnimation->setDuration(ShowMenuDuration);

connect(m_pItemAnimation, &QVariantAnimation::valueChanged, this, [this](const QVariant & v){
	UpdateActions(v.toInt());
});

鼠标进入悬浮球时,执行展开动画

void PopRingMenu::ExpandMenu()
{
	if (m_pItemAnimation)
	{
		if (m_pItemAnimation->state() != QAbstractAnimation::Running
			&& m_pItemAnimation->currentValue().toInt() != ShowMenuEndValue)
		{
			m_pItemAnimation->setDirection(QVariantAnimation::Forward);
			m_pItemAnimation->start();
		}
	}
	else
	{
		UpdateActions(ShowMenuEndValue);
	}

	KillHideTimer();
	QuicklyLighter();
}
  1. 鼠标离开悬浮球时,执行收起动画,与展开动画相反方向
  2. 收起动画时有一个细节点,那就是鼠标hover在菜单项上时,也不能收起
void PopRingMenu::CollapseMenu()
{
	if (false == IsUnderMouse())
	{
		if (m_pItemAnimation)
		{
			m_pItemAnimation->setDirection(QVariantAnimation::Backward);
			m_pItemAnimation->start();
		}
		else
		{
			UpdateActions(ShowMenuStartValue);
		}

		KillHideTimer();
		SlowlyFade();
	}
}

展开和收起动画实现细节,根据动画指定帧数,按比例进行缩放和移动菜单项

void PopRingMenu::UpdateActions(int msecond)
{
	int curDistance = msecond * m_iDistance / ShowMenuEndValue;
	for (int i = 0; i < m_items.size(); ++i)
	{
		PopRingItem * item = m_items.at(i);
		
		double radians = qDegreesToRadians(m_iStepAngle * i * 1.0 + m_iStartAngle);
		int offx = curDistance * qCos(radians);
		int offy = curDistance * qSin(radians);
		item->move(pos() + QPoint(offx, offy));

		int curSize = msecond * m_iItemSize / ShowMenuEndValue;
		item->SetRadius(curSize);

		item->setVisible(ShowMenuStartValue != msecond);
	};

	::SetWindowPos(HWND(winId()), HWND_TOPMOST, 0, 0, 0, 0, SWP_NOMOVE | SWP_NOSIZE);
}

悬浮球指定时间未激活时,淡出,减少对用户视觉冲击文章来源地址https://www.toymoban.com/news/detail-473419.html

void PopRingMenu::SetSlowlyFade(bool enabled)
{
	if (enabled)
	{
		if (nullptr == m_pOpacityAnimation)
		{
			m_pOpacityAnimation = new QPropertyAnimation(this, "opacity");
			m_pOpacityAnimation->setEasingCurve(QEasingCurve::OutCubic);
			m_pOpacityAnimation->setStartValue(SlowlyStartValue);
			m_pOpacityAnimation->setEndValue(SlowLyEndValue);
			m_pOpacityAnimation->setDuration(SlowlyFadeDuration);
		}
	}
	else
	{

		if (m_pOpacityAnimation)
		{
			delete m_pOpacityAnimation;
			m_pOpacityAnimation = nullptr;
		}
	}
}

四、相关文章

  1. qt 之菜单项定制
  2. Qt 之 QAbstractItemView 右键菜单
  3. Qt 弹出式菜单阴影
  4. Qt 之自定义 QLineEdit 右键菜单
  5. Qt 之股票组件 - 自选股 -- 列表可以拖拽、右键常用菜单

到了这里,关于Qt之悬浮球菜单的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【Python】Selenium多级悬浮菜单定位方法分享

    举例图: 以下菜单选择需逐级鼠标悬浮显示才可选择 注明: 示例代码: 本文均为本人编写,本文如有侵权请告知删除。

    2024年02月12日
    浏览(38)
  • Vue - 实现垂直菜单分类栏目,鼠标移入后右侧出现悬浮二级菜单容器效果(完整示例源码,详细代码注释,一键复制开箱即用)

    网上的教程都太乱了,各种杂乱无注释代码、图片资源丢失、一堆样式代码,根本无法改造后应用到自己的项目中。 本文实现了 在 Vue / Nuxt 项目中,垂直分类菜单项,当用户鼠标移入菜单后,右侧自动出现二级分类悬浮容器盒子效果, 您可以直接复制源码,然后按照您的需

    2024年02月11日
    浏览(44)
  • Qt鼠标悬停+悬浮窗口

    这两个功能,有很多办法可以实现,这里记一下笔者常用的。 mouseHover.h mouseHover.cpp QRImage.h QRImage.cpp MainWindow.h MainWindow.cpp

    2024年02月06日
    浏览(44)
  • Qt 之按钮鼠标 悬浮、按下、松开后的效果

    本文介绍了Qt中的按钮实现响应鼠标悬浮、按下、松开后的效果,在三种状态下,按钮改变不同的背景图片。 方式1:通过修改样式表的方式去实现; 方式2:通过继承QPushButton去实现一个自定义的按钮; 方式3:在主界面中给按钮安装事件过滤器的方式去实现 这里尽量不要有

    2024年02月10日
    浏览(43)
  • RK3588 之视频和QT悬浮DRM显示

            在上一章中我们讲到,解码后的帧通过RGA进行混合后,我们需要送给DRM来进行显示,在这一章中,我们具体的讲怎么通过DRM显示视频帧,怎么通过DRM显示视频和QT,怎么通过DRM来做alpha ,colorkey 及图层序。具体的DRM的文档,我们可以参考RK提供的关于DRM的文档。我就不

    2024年02月09日
    浏览(120)
  • Qt之QTableView显示鼠标悬浮下的项的信息

            业务上遇到一些需求,某个需求是当鼠标移动到QTableView的item上时,显示该item的某些信息。首先想到的思路就是鼠标悬浮事件,即安装QTableView的事件过滤器,然后在eventFilter进行判断即可。实现很简单,主要在针对qt界面处理子界面的事件响应时,主要是还没搞清

    2024年02月13日
    浏览(44)
  • 记录--一个炫酷的css动画

    最近有一个需求,要我实现一个动画效果,效果如下 简单分析了一下效果,是一个3d的效果,首先是一个圆,接着是两段圆环,第三层是一堆小圆环,最里面是一些线上运动,有着渐变色的矩形。 第一层的圆环很简单。 第二层的圆环其实也挺简单的 ,只要在设置了border-ra

    2024年02月11日
    浏览(51)
  • 一个跨平台的`ChatGPT`悬浮窗工具

    使用 avalonia 实现的 ChatGPT 的工具,设计成悬浮窗,并且支持插件。 在使用 avalonia 实现悬浮窗也是非常的简单的。 实现我们需要将窗体设置成无边框 在 Window 根节点添加一下属性,想要在Linux下生效请务必添加 SystemDecorations 属性 这样我们的窗口就设置成了无边框。 然后我们

    2024年02月11日
    浏览(43)
  • 【QT入门】 Qt自定义控件与样式设计之QPushButton实现鼠标悬浮按钮弹出对话框

    往期回顾: 【QT入门】 Qt自定义控件与样式设计之qss选择器-CSDN博客 【QT入门】 Qt自定义控件与样式设计之QLineEdit的qss使用-CSDN博客 【QT入门】Qt自定义控件与样式设计之QPushButton常用qss-CSDN博客 鼠标悬浮弹出对话框的功能:最终要实现纯代码设计出一个音量按钮,当鼠标悬浮

    2024年04月23日
    浏览(40)
  • QT5 Virtual Keyboard实现自适应悬浮键盘(多种方法详细记录)

            项目需求实现悬浮键盘,点击QLineEdit或QTextEdit自动弹出自适应悬浮键盘,尝试了以下几种方法后选择了修改QT Virtual Keyboard源码。在这里把其他方法/想法也列出来做一下记录。         项目环境:QT5.13.2  VS2017 目录 方法1:调用windows自带系统软件盘 介绍  代码

    2024年02月02日
    浏览(65)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包