关闭

QML 发光呼吸动画字体

标签: qml-字体发光呼吸动画
73人阅读 评论(0) 收藏 举报
分类:

前言

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

正文

先来看看效果
这里写图片描述

源码:

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()
            }
        }
        NumberAnimation on opacity {
            id:an2
            to:0.2
            duration: 2000
            onStopped: {
                an1.start()
            }
        }
    }
}

此外,还可以通过修改 Glow 的参数来实现不同的效果,具体可以看 Qt 帮助文档。
源码在这里点击下载

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:17026次
    • 积分:716
    • 等级:
    • 排名:千里之外
    • 原创:53篇
    • 转载:9篇
    • 译文:0篇
    • 评论:4条
    文章分类
    最新评论