Qt开发带动画动态进度条控件（水波纹，圆形）

离歌漠

已于 2023-03-16 16:10:38 修改

阅读量5.4k

点赞数 11

分类专栏： Qt 文章标签： qt5 c++

于 2022-03-25 14:23:19 首次发布

本文链接：https://blog.youkuaiyun.com/qq_36651243/article/details/123734627

版权

Qt 专栏收录该内容

49 篇文章

订阅专栏

本文介绍了一种修复圆角进度条样式Bug的方法，并通过QVariantAnimation实现动画效果。此外，还展示了如何使用QPainter绘制带有平滑边缘的圆角进度条。

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

效果图

在这里插入图片描述
核心代码
同时修复进度条圆角样式存在的bug

//动画部分
m_vAnimation = new QVariantAnimation(this);
if (m_vAnimation) {
	m_vAnimation->setDuration(2000);
	m_vAnimation->setKeyValueAt(0, 0.0);
	m_vAnimation->setKeyValueAt(0.5, 0.5);
	m_vAnimation->setKeyValueAt(1, 1.0);
	m_vAnimation->setLoopCount(-1);
	m_vAnimation->start();
	connect(m_vAnimation, &QVariantAnimation::valueChanged, this, &vProgressBars::sltAtIndexChanged);
}
void vProgressBars::sltAtIndexChanged(QVariant value)
{
	m_nAtIndex = value.toDouble();
	update();
}

//进度条绘制
void vProgressBars::paintEvent(QPaintEvent * event)
{
	QPainter painter(this);
	// 抗锯齿 + 平滑边缘处理
	painter.setRenderHints(QPainter::Antialiasing, true);
	painter.setRenderHints(QPainter::SmoothPixmapTransform, true);
	painter.setBrush(QBrush(QColor(255, 255, 255, 51)));
	painter.setPen(Qt::transparent);
	QRect rect = this->rect();
	int radius = rect.height() / 2;
	painter.drawRoundedRect(rect, radius, radius);

	QPainterPath draw_path;
	double percent = static_cast<double>(value()) / static_cast<double>(maximum());
	double x_move = (percent * width());
	double theta = acos(abs(x_move - radius) / radius);
	double y_move = (sin(theta) * radius);
	if (x_move <= radius) {
		draw_path.moveTo(x_move, radius - y_move);
		draw_path.arcTo(QRect(0, 0, radius * 2, radius * 2), static_cast<int>(180 - theta / M_PI * 180), static_cast<int>(theta / M_PI * 180));
		draw_path.arcTo(QRect(0, 0, radius * 2, radius * 2), 180, static_cast<int>(theta / M_PI * 180));
		draw_path.lineTo(static_cast<int>(x_move), static_cast<int>(radius - y_move));
	}
	else if (x_move < radius * 2) {
		draw_path.moveTo(radius, 0);
		draw_path.arcTo(QRect(0, 0, radius * 2, radius * 2), 90, 90);
		draw_path.arcTo(QRect(0, 0, radius * 2, radius * 2), 180, 90);
		draw_path.arcTo(QRect(0, 0, radius * 2, radius * 2), 270, static_cast<int>(90 - theta / M_PI * 180));
		draw_path.lineTo(static_cast<int>(x_move), static_cast<int>(radius - y_move));
		draw_path.arcTo(QRect(0, 0, radius * 2, radius * 2), 90 - static_cast<int>(90 - theta / M_PI * 180), static_cast<int>(90 - theta / M_PI * 180));
	}
	else {
		draw_path.moveTo(radius, 0);
		draw_path.arcTo(QRect(0, 0, radius * 2, radius * 2), 90, 90);
		draw_path.lineTo(0, height() - radius * 2);
		draw_path.arcTo(QRect(0, 0, radius * 2, radius * 2), 180, 90);
		draw_path.lineTo(percent*width() - radius * 2, height());
		draw_path.arcTo(QRect(static_cast<int>(percent*width()) - radius * 2, 0, radius * 2, radius * 2), 270, 90);
		draw_path.lineTo(percent*width(), radius * 2);
		draw_path.arcTo(QRect(static_cast<int>(percent*width() - radius * 2), 0, radius * 2, radius * 2), 0, 90);
		draw_path.lineTo(radius * 2, 0);
	}
	//整个进度条颜色
	//QLinearGradient linearGradient(rect.topLeft(), rect.topRight());
	//进度条部分颜色
	QLinearGradient linearGradient(QPoint(0, 0), QPoint(x_move, 0));
	linearGradient.setColorAt(1.0, QColor(255, 66, 213));
	linearGradient.setColorAt(m_nAtIndex, QColor(43, 74, 255));
	linearGradient.setColorAt(0.0, QColor(43, 74, 255));
	painter.fillPath(draw_path, QBrush(linearGradient));
}