字体闪烁主要通过动画来实现,控制字体的透明度,达到闪烁的效果。
1、SequentialAnimation 介绍
SequentialAnimation和 ParallelAnimation 都是多动画的实现方式,SequentialAnimation是一种串行的动画,动画按顺序运行,而ParallelAnimation是并行动画,所有的动画同时运行。对于动画文字则是采用SequentialAnimation将多个透明度的变化动画串联实现。下面介绍SequentialAnimation的相关参数和使用方法。
runing:运行状态,true代表运行,false代表停止状态
loops:播放次数,1代表循环播放一次,Animation.Infinite代表无限循环播放
start(): 启动动画播放
stop(): 停止动画播放
使用方法如下:
import QtQuick 2.0
Rectangle {
id: rect
width: 100; height: 100
color: "red"
SequentialAnimation {
running: true // 默认为true,代表初始化完成后动画自动播放
NumberAnimation { target: rect; property: "x"; to: 50; duration: 1000 } // 动画1,将x移动到50的位置,持续时间为1s
NumberAnimation { target: rect; property: "y"; to: 50; duration: 1000 } // 动画2,将y移动到50的位置,持续时间为1s
}
}
上述代码,动画1和动画2作为SequentialAnimation的元素,在播放过程中,会先播放动画1,动画1完成后再播放动画2,实际的效果为,红色矩形框从(0,0)位置再1s内慢慢向右移动到(50,0)的位置,然后从(50,0)的位置在1s内慢慢向下移动到(50,50)的位置。
2、字体闪烁实现
了解了SequentialAnimation的使用方法,下面介绍如何实现字体闪烁。字体的实现代码如下:
Rectangle{
id:background
anchors.fill: parent
color: "transparent"
Text {
id: stringInfo
text: textName
color: repeatFlag ? fontColor : fontDefaultColor
anchors.fill: parent
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
font.bold: true
font.pixelSize: 30
}
}
字体的默认透明度"opacity"默认为1,所以,构造第一个动画,将透明度从1变到0.2,持续时间为2000ms,代码如下:
NumberAnimation {
target: stringInfo
property: "opacity"
duration: 2000
to: 0.2
easing.type: Easing.InOutQuad
}
动画1完成后,接下来实现动画2,当前的字体透明度为0.2,所以动画2将透明度从0.2设置到1,from默认为0.2,因此无需写入代码。
NumberAnimation {
target: stringInfo
property: "opacity"
duration: 2000
to: 1
easing.type: Easing.InOutQuad
}
通过SequentialAnimation将两个动画合起来,并且设置为无限循环播放
SequentialAnimation {
id: seqanimation
running: false
loops:Animation.Infinite
NumberAnimation {
target: stringInfo //字体对象的id
property: "opacity" // 变量为透明度
duration: 2000
to: 0.2
easing.type: Easing.InOutQuad
}
NumberAnimation {
target: stringInfo
property: "opacity"
duration: 2000
to: 1.0
easing.type: Easing.InOutQuad
}
}
调用方式如下:
/* 启动动画 */
seqanimation.start();
/* 停止动画 */
seqanimation.stop();
stringInfo.opacity = 1; // 停止动画的时候,将字体的默认透明度设置为1,因为动画停止时的透明度可以是任意值,为了防止字体颜色正常,所以做此操作。
大家可以根据上面的方法来动手试一试吧。