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类型说明-Glow

Glow ImportStatement:   import QtGraphicalEffects 1.0 Since:  QtGraphicalEffects 1.0 Inherits:   ...

QML官方系列教程——Using Qt Quick Designer

附网址:http://qt-project.org/doc/qtcreator-3.1/creator-using-qt-quick-designer.html Using Qt Quick De...

Qt Quick里的图形效果(Graphical Effects)

Graphical Effects ,姑且叫作图形效果吧。它提供了 Blend 、 Color 等好几类效果,有些类别下面又有多种不同的效果……在界面引入图形效果,能够让我们的UI更具吸引力……...
  • foruok
  • foruok
  • 2015年01月14日 07:07
  • 9873

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

QML做渐变色字体

前言渐变色字体就不多说了,在开发应用中用得很多,之前用LinearGradient来实现,但是一直效果不太理想,在桌面端运行时没有问题,但是在android上表现不一样。后来查看官方文档,找到一种比较...

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

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

android 字体从左往右发光闪过

个人还是很看中用户体验这一方面,所以有时候使用别人开发的app(一些特效),自己也想打开思维,这是怎么实现的。 今天的效果是这样的,有一行字体以字体自身发亮的方式从左向右闪过。效果图如下: ...

UILabel设置字体发光效果

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

Android闪闪发光字体效果

Android实现类似Facebook shimmer加载效果,可以实现字体的闪闪发光
  • xu_fu
  • xu_fu
  • 2014年04月26日 09:56
  • 15163
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:QML 发光呼吸动画字体
举报原因:
原因补充:

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