QMLLinearGradient实现文字渐变闪烁动画

QML利用Timer实现字体渐变动画

上一篇文章介绍了利用Timer对单个字母进行颜色变化实现文字渐变动画&＃xff0c;对于文字比较固定的场景比较合适&＃xff0c;但是对于文字数目会发生变化的场景的适应性并不好&＃xff0c;发现了一种更好的方法来实现文字的动画。主要用到的QML功能如下&＃xff1a;

1、LinearGradient
2、GradientStop
3、SequentialAnimation
4、NumberAnimation

实现原理

利用LinearGradient对文字区域进行梯度颜色设定&＃xff0c;利用GradientStop在不同的位置设置不同的颜色&＃xff0c;产生渐变&＃xff0c;颜色和上篇文章一样&＃xff0c;绑定变量&＃xff0c;最后通过SequentialAnimation和NumberAnimation对变量进行循环改变&＃xff0c;触发字体颜色的变化&＃xff0c;详细逻辑在开头给出的文章中有介绍&＃xff0c;这里不罗嗦了。

实现代码

FontGrade.qml

import QtQuick 2.14
import QtGraphicalEffects 1.14Rectangle {id: fontGradewidth: 300height: 80property string info: "hello world"property int idxx: 1Text {id: nametext: infoanchors.fill: parentfont.pointSize: 30font.bold: true}LinearGradient {anchors.fill: namesource: namestart: Qt.point(0, 0) // start 和 end主要作用是从左往右end: Qt.point(fontGrade.width, 0)gradient: Gradient {GradientStop { position: 0.0; color: Qt.hsva((15 - (((idxx &＃43; 10) > 15) ? idxx - 15 &＃43; 10:idxx &＃43; 10)) * 16/255, 1, 1,1) }GradientStop { position: 0.1; color: Qt.hsva((15 - (((idxx &＃43; 9) > 15) ? idxx - 15 &＃43; 9:idxx &＃43; 9)) * 16/255, 1, 1,1) }GradientStop { position: 0.2; color: Qt.hsva((15 - (((idxx &＃43; 8) > 15) ? idxx - 15 &＃43; 8:idxx &＃43; 8)) * 16/255, 1, 1,1) }GradientStop { position: 0.3; color: Qt.hsva((15 - (((idxx &＃43; 7) > 15) ? idxx - 15 &＃43; 7:idxx &＃43; 7)) * 16/255, 1, 1,1) }GradientStop { position: 0.4; color: Qt.hsva((15 - (((idxx &＃43; 6) > 15) ? idxx - 15 &＃43; 6:idxx &＃43; 6)) * 16/255, 1, 1,1) }GradientStop { position: 0.5; color: Qt.hsva((15 - (((idxx &＃43; 5) > 15) ? idxx - 15 &＃43; 5:idxx &＃43; 5)) * 16/255, 1, 1,1) }GradientStop { position: 0.6; color: Qt.hsva((15 - (((idxx &＃43; 4) > 15) ? idxx - 15 &＃43; 4:idxx &＃43; 4)) * 16/255, 1, 1,1) }GradientStop { position: 0.7; color: Qt.hsva((15 - (((idxx &＃43; 3) > 15) ? idxx - 15 &＃43; 3:idxx &＃43; 3)) * 16/255, 1, 1,1) }GradientStop { position: 0.8; color: Qt.hsva((15 - (((idxx &＃43; 2) > 15) ? idxx - 15 &＃43; 2:idxx &＃43; 2)) * 16/255, 1, 1,1) }GradientStop { position: 0.9; color: Qt.hsva((15 - (((idxx &＃43; 1) > 15) ? idxx - 15 &＃43; 1:idxx &＃43; 1)) * 16/255, 1, 1,1) }GradientStop { position: 1.0; color: Qt.hsva((15 - (((idxx) > 15) ? idxx - 15:idxx)) * 16/255, 1, 1,1) }}}SequentialAnimation {running: true // 默认启动loops:Animation.Infinite // 无限循环NumberAnimation {target: fontGrade // 目标对象property: "idxx" // 目标对象中的属性duration: 800 // 变化时间to: 15 // 目标值}}}


main.qml

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQml 2.12Window {visible: truewidth: 640height: 480title: qsTr("Hello World")FontGrade {id: bgagardadanchors.centerIn: parent}
}