QML 发光呼吸动画字体

原创 2017年08月13日 13:20:24

前言

用 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 帮助文档。
源码在这里点击下载

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

QML动画和过度

动画(Animation)和过度(Transition)元素 Transition - 状态改变的过度动画SequentialAnimation - 串行执行动画ParallelAnimatio...

css字体发光技术

通常情况下,我们使用text-shadow就足以实现文字发光,如图 如图,如果文字比较大并且阴影范围也很大的话,阴影部分的颜色就会被拉得很淡。 而往往我们不需要这种...

Android自定义控件(三)——打造闪闪发光的字体

介绍在小米的开机动画和一些欢迎界面中, 我们经常看到这种闪闪发光的流光字体。看起来很炫酷,其实实现原理相当简单,我们只需要写自定义控件继承TextView,然后使用渲染器Gradient设置颜色渐变和...

Android闪闪发光字体效果

Android实现类似Facebook shimmer加载效果,可以实现字体的闪闪发光
  • xu_fu
  • xu_fu
  • 2014-04-26 09:56
  • 14896

CSS实现盒子与字体发光效果

用css实现盒子与字体发光的效果

Android特效View之二之 闪闪发光Shimmer字体特效

Android特效View之二之 闪闪发光Shimmer字体特效 Facebook开源了一款加载效果工具Shimmer,可以实现字体的闪闪发光效果,效果如下 链接地址在...

UILabel设置字体发光效果

1、新建一个继承自UILabel的类 2、在这个类中定义red、green、blue三个颜色值变量和一个发光范围变量glowSize。 3、重写UILable的drawTextInRect方法,并...

Android闪闪发光字体

  • 2015-06-15 11:01
  • 2.28MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)