QML实现弹幕功能

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/chyuanrufeng/article/details/80443724

弹幕在视频网站上很流行。这里用QML实现一下基本功能。主要用到了动画以及动态创建组件的相关知识。

效果如下（图片的动态效果不太好O(∩_∩)O哈哈~）

代码如下：

import QtQuick 2.9
import QtQuick.Controls 2.2

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("弹幕")

    Rectangle{
       anchors.fill: parent;
       id : window
       color: "black"
    }

    property var liststr: ["呵呵o(*￣︶￣*)o","nihao","ceshisx","你是说","啥意思","哈哈"]
    property int index: 0

    //动态加载
    function addItem()
    {
       var oldy = Math.random()*500%200 ;
       for (var i = 0 ; i < 1; ++i)
       {
           var component = Qt.createComponent("qrc:/TextItem.qml");

           if (component.status == Component.Ready)
           {
               var textitem = component.createObject(window);
               oldy += 30;
               textitem.y = oldy;
               index = Number(oldy%5);
               textitem.textstr = liststr[index];
           }
       }
    }

    Component.onCompleted: {
            addItem();
    }

    Timer {
             interval: 1000; running: true; repeat: true
             onTriggered: addItem()
         }

}

组件代码TextItem.qml

import QtQuick 2.9
import QtQuick.Controls 2.2

Rectangle{
    id : root
    height: 30;
    property real endx: 500;
    property alias textstr: roottext.text
    Text {
        id : roottext
        color: Qt.rgba(Math.random()+0.1,Math.random()+0.05,Math.random(),1);
        font.pointSize: 15
    }
    NumberAnimation on  x{
        from : Math.random()*20
        to : endx ; duration:5000
        onStopped: root.destroy(1)
    }

}