QWidget QML发光呼吸动画字体

QML与QWidget实现发光呼吸动画字体

原创

已于 2025-07-08 13:45:55 修改 · 408 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#数据库 #服务器 #运维

于 2023-11-16 09:40:07 首次发布

博客介绍了用QML实现呼吸动画效果字体的方法，主要借助Glow组件，通过控制透明度改变达成效果。还提及了QWidget实现方式，即从UI上拉取QuickWidget控件。

用 QML 来实现一个呼吸动画效果的字体，非常酷炫，主要使用 Glow 组件来实现，然后通过控制透明度的改变来实现想要的效果。

mainText.qml

Item {

    Rectangle {
        anchors.fill: parent
        color: "black"
    }

    Text {
        id: text
        anchors.fill: parent
        text: qsTr("ADBASn你好")
        font.bold: true
        font.pixelSize: 50
        color:"white"
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
    }

    Glow {
        anchors.fill: text
        radius:9
        samples: 13
        color: "#ddd"
        source: text
        spread: 0.5
        opacity: 0.8
        NumberAnimation on opacity {
            id:an1
            to:0.8
            duration: 2000
            running: true
            onStopped: {
                an2.start()
            }
        }
        NumberAni