效果图如下
实现原理
利用Qt的绘制函数,先绘制歌词文案,然后绘制歌词遮罩,歌词遮罩通过定时器计算时长,从而改变遮罩长度,达到效果。
核心代码
//设置歌词内容和启动定时器
void Lrc::startLrcMask(qint64 intervalTime, const QString& text)
{//更换文本内容setText(text);// 这里设置每隔30毫秒更新一次遮罩的宽度qreal count = intervalTime / 30;// 获取遮罩每次需要增加的宽度,这里的m_lrcWidth是部件的固定宽度m_lrcMaskWidthInterval = m_lrcWidth / count;m_lrcMaskWidth = 0;if (m_timer) {m_timer->start(30);}
}//定时器模块
void Lrc::sltTimerOut()
{m_lrcMaskWidth += m_lrcMaskWidthInterval;update();
}//绘制
void Lrc::paintEvent(QPaintEvent * event)
{QPainter painter(this);painter.setFont(m_font);// 先绘制渐变文字painter.setPen(QPen(m_textLinearGradient, 0));painter.drawText(0, 0, m_lrcWidth, 60, Qt::AlignLeft, text());// 最后绘制歌词遮罩painter.setPen(QPen(m_maskLinearGradient, 0));painter.drawText(0, 0, m_lrcMaskWidth, 60, Qt::AlignLeft, text());
}
源码传送门