Font flashing is mainly realized through animation, which controls the transparency of fonts to achieve the effect of flashing.
1. Introduction to SequentialAnimation
Both SequentialAnimation and ParallelAnimation are implementations of multiple animations. SequentialAnimation is a serial animation, and the animation runs in sequence, while ParallelAnimation is a parallel animation in which all animations run at the same time. For animated text, SequentialAnimation is used to implement multiple transparency change animations in series. The following describes the related parameters and usage of SequentialAnimation.
runing：运行状态，true代表运行，false代表停止状态
loops：播放次数，1代表循环播放一次，Animation.Infinite代表无限循环播放
start(): 启动动画播放
stop(): 停止动画播放
The method of use is as follows:
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
}
}
In the above code, animation 1 and animation 2 are used as the elements of SequentialAnimation. During the playback process, animation 1 will be played first, and then animation 2 will be played after animation 1 is completed. The actual effect is that the red rectangle is 1s from the (0, 0) position Inner slowly moves to the right to the (50, 0) position, and then slowly moves down from the (50, 0) position to the (50, 50) position within 1 second.
2. Realization of font flashing
Understand the use of SequentialAnimation, the following describes how to achieve font flashing. The implementation code of the font is as follows:
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
}
}
The default transparency of the font "opacity" is 1 by default, so, construct the first animation, change the transparency from 1 to 0.2, and the duration is 2000ms, the code is as follows:
NumberAnimation {
target: stringInfo
property: "opacity"
duration: 2000
to: 0.2
easing.type: Easing.InOutQuad
}
After animation 1 is completed, next implement animation 2. The current font transparency is 0.2, so animation 2 sets the transparency from 0.2 to 1, and from defaults to 0.2, so there is no need to write code.
NumberAnimation {
target: stringInfo
property: "opacity"
duration: 2000
to: 1
easing.type: Easing.InOutQuad
}
Combine the two animations through SequentialAnimation and set them to play in an infinite loop
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
}
}
The calling method is as follows:
/* 启动动画 */
seqanimation.start();
/* 停止动画 */
seqanimation.stop();
stringInfo.opacity = 1; // 停止动画的时候，将字体的默认透明度设置为1，因为动画停止时的透明度可以是任意值，为了防止字体颜色正常，所以做此操作。
You can give it a try according to the above method.