QML实现跑马灯

import QtQuick 2.0
import QtQuick.Window 2.2
import QtGraphicalEffects 1.12

Window {
    // 对内属性
    property string __text: ""
    property int __duration: 3000

    id:root

    color: "#00000000"
    flags: Qt.FramelessWindowHint | Qt.Window | Qt.WindowStaysOnTopHint | Qt.WA_TranslucentBackground | Qt.WA_TransparentForMouseEvents

    width: 1080
    height: 56

    Rectangle{
        id: rect
        anchors.centerIn: parent
        width: 1080
        height: parent.height
        clip: true

        color: "#00000000"
        LinearGradient {  // 背景渐变
            anchors.fill: parent
            start: Qt.point(0, 0)
            end: Qt.point(1080, 0)
            gradient: Gradient {
                GradientStop { position: 0.0; color: Qt.rgba(35/255,45/255,70/255, 0.0) }
                GradientStop { position: 0.1; color: Qt.rgba(35/255,45/255,70/255, 0.65) }
                GradientStop { position: 0.5; color: Qt.rgba(35/255,45/255,70/255, 0.69) }
                GradientStop { position: 0.9; color: Qt.rgba(35/255,45/255,70/255, 0.65) }
                GradientStop { position: 1.0; color: Qt.rgba(35/255,45/255,70/255, 0.0) }
            }
        }

        Text
        {
            id:marqueeText
            width: 936
            height:parent.height
            text:__text
            color:Qt.rgba(1,1,1, 0.65)
            font.pixelSize: 24
            font.family: "微软雅黑"

            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignRight

            PropertyAnimation on x{
                running: false
                id: marqueeAnimator
                from:marqueeText.width
                to: -marqueeText.width
                duration: __duration
            }
        }
    }

    Rectangle{
        width: parent.width
        height: 1
        color: "#00000000"
        anchors.top: parent.top

        LinearGradient {
            anchors.fill: parent
            start: Qt.point(0, 0)
            end: Qt.point(1080, 0)
            gradient: Gradient {
                GradientStop { position: 0.0; color: Qt.rgba(127/255,169/255,194/255, 0.0) }
                GradientStop { position: 0.1; color: Qt.rgba(127/255,169/255,194/255, 0.65) }
                GradientStop { position: 0.5; color: Qt.rgba(127/255,169/255,194/255, 0.69) }
                GradientStop { position: 0.9; color: Qt.rgba(127/255,169/255,194/255, 0.65) }
                GradientStop { position: 1.0; color: Qt.rgba(127/255,169/255,194/255, 0.0) }
            }
        }
    }

    Rectangle{
        width: parent.width
        height: 1
        color: "#00000000"
        anchors.bottom: parent.bottom

        LinearGradient {
            anchors.fill: parent
            start: Qt.point(0, 0)
            end: Qt.point(1080, 0)
            gradient: Gradient {
                GradientStop { position: 0.0; color: Qt.rgba(127/255,169/255,194/255, 0.0) }
                GradientStop { position: 0.1; color: Qt.rgba(127/255,169/255,194/255, 0.65) }
                GradientStop { position: 0.5; color: Qt.rgba(127/255,169/255,194/255, 0.69) }
                GradientStop { position: 0.9; color: Qt.rgba(127/255,169/255,194/255, 0.65) }
                GradientStop { position: 1.0; color: Qt.rgba(127/255,169/255,194/255, 0.0) }
            }
        }
    }

    Component.onCompleted: {
        setX(Screen.width / 2 - width / 2);
        setY(160);
    }

    Connections{
        target: marqueeAnimator
        onFinished:{
            console.log("animation finish")
            root.visible = false
        }
        onStarted:{
            console.log("animation start")
        }
    }

    function showMarquee( content){
        if(marqueeAnimator.running){
            console.log("animation is running")
            return
        }

        console.log(content)
        root.visible = true
        __text = content
        __duration = __text.length * 500
        //        console.log(__duration)
        console.log(marqueeAnimator.duration)
        marqueeAnimator.start()
    }
}