Qt实战8.弹幕走起来！

1 需求描述

1. 使用Qt实现弹幕效果；
2. 支持全屏置顶显示；
3. 实现过程简单，拒绝复杂。

2 设计思路

1. 使用QLabel显示弹幕文字；
2. 通过QDesktopWidget获取屏幕尺寸，来确定QLabel动画起点；
3. 使用QPropertyAnimation动画循环显示QLabel;
4. 每次循环随机获取显示内容和字体颜色。

3 代码实现

1. 首先初始化显示文字列表，可以通过加载文件方式获取，也可以在程序里写死，例如写点情话：

void Widget::initMessage()
{
    m_messageList.append(QStringLiteral("爱你一万年"));
    m_messageList.append(QStringLiteral("老婆我爱你"));
    m_messageList.append(QStringLiteral("爱你么么哒"));
    m_messageList.append(QStringLiteral("老婆最漂亮"));
    m_messageList.append(QStringLiteral("老婆最可爱"));
    m_messageList.append(QStringLiteral("老婆最温柔"));
    m_messageList.append(QStringLiteral("老婆最美丽"));
    m_messageList.append(QStringLiteral("老婆最体贴"));
    m_messageList.append(QStringLiteral("爱你爱你爱你么么哒"));
    m_messageList.append(QStringLiteral("老婆萌萌哒"));
    m_messageList.append(QStringLiteral("老婆最贤惠"));
    m_messageList.append(QStringLiteral("老婆棒棒哒"));
    m_messageList.append(QStringLiteral("爱你一辈子"));
    m_messageList.append(QStringLiteral("快乐与你随行"));
    m_messageList.append(QStringLiteral("天空中最亮的星"));
    m_messageList.append(QStringLiteral("回眸一笑胜星华"));
    m_messageList.append(QStringLiteral("你是花丛中的蝴蝶"));
    m_messageList.append(QStringLiteral("让人久久难以忘怀"));
    m_messageList.append(QStringLiteral("我眼中最美的偶象"));
    m_messageList.append(QStringLiteral("你如此美丽可人"));
    m_messageList.append(QStringLiteral("你的美点缀了这一切"));
    m_messageList.append(QStringLiteral("老婆乃我心中唯一"));
    m_messageList.append(QStringLiteral("你如此美丽可人"));
    m_messageList.append(QStringLiteral("老婆最善解人意"));
    m_messageList.append(QStringLiteral("我眼中最美的偶象"));
    m_messageList.append(QStringLiteral("爱你爱你爱你么么哒"));
    m_messageList.append(QStringLiteral("你是花丛中的蝴蝶"));
    m_messageList.append(QStringLiteral("爱你爱你爱你么么哒"));
}

2. 文字初始化后，初始化QLabel再设置动画进行显示，代码如下：

void Widget::onTimeOut()
{
    initMessage();

    for (int i = 0; i < m_messageList.count(); ++i) {
        QLabel *label = new QLabel(this);
        label->setMinimumWidth(500);
        label->setAttribute(Qt::WA_TranslucentBackground);
        label->setWindowFlags(label->windowFlags() | Qt::FramelessWindowHint | Qt::Dialog | Qt::WindowStaysOnTopHint);
        label->setStyleSheet(QString("color:%1;")
                             .arg(QColor::colorNames().at(QRandomGenerator::global()->bounded(QColor::colorNames().count()))));

        QFont font;
        font.setBold(true);
        font.setFamily(QStringLiteral("幼圆"));
        font.setPixelSize(50);

        label->setFont(font);
        label->setText(m_messageList.at(QRandomGenerator::global()->bounded(m_messageList.count())));
        label->move(QDesktopWidget().width() + QRandomGenerator::global()->bounded(1000) , i * 50 + 10);
        label->show();

        QPropertyAnimation *animation = new QPropertyAnimation(label, "pos", this);
        //每循环一次重新设置字体颜色以及显示内容
        connect(animation, &QAbstractAnimation::currentLoopChanged, [=]() {
            label->setText(m_messageList.at(QRandomGenerator::global()->bounded(m_messageList.count())));
            label->setStyleSheet(QString("color:%1;")
                                 .arg(QColor::colorNames().at(QRandomGenerator::global()->bounded(QColor::colorNames().count()))));
        });

        animation->setStartValue(QPoint(label->x(), label->y()));
        animation->setEndValue(QPoint(-400,  label->y()));
        animation->setDuration(QRandomGenerator::global()->bounded(3500, 5000));
        animation->setLoopCount(-1);
        animation->start();
    }
}

到此，弹幕效果就做好了。

4 总结

实现非常简单，仅仅用到QLabel、QPropertyAnimation就完成了弹幕效果，这里需要注意QLabel的设置：

label->setAttribute(Qt::WA_TranslucentBackground); 设置背景透明
label->setWindowFlags(label->windowFlags() | Qt::FramelessWindowHint | Qt::Dialog | Qt::WindowStaysOnTopHint); 设置无边框、对话框、置顶显示

这样才能达到预期效果，然后每次循环完成后设置随机内容和字体颜色进入下一次循环。

5 下载

示例代码