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

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

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

实现原理

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

实现代码

FontGrade.qml

import QtQuick 2.14
import QtGraphicalEffects 1.14

Rectangle {
   id: fontGrade
   width: 300
   height: 80
   property string info: "hello world"
   property int idxx: 1
   Text {
       id: name
       text: info
       anchors.fill: parent
       font.pointSize: 30
       font.bold: true
   }
   LinearGradient  {
       anchors.fill: name
       source: name
       start: Qt.point(0, 0)  // start 和 end主要作用是从左往右
       end: Qt.point(fontGrade.width, 0)
       gradient: Gradient {
           GradientStop { position: 0.0; color: Qt.hsva((15 - (((idxx + 10) > 15) ? idxx - 15 + 10:idxx + 10)) * 16/255, 1, 1,1) }
           GradientStop { position: 0.1; color: Qt.hsva((15 - (((idxx + 9) > 15) ? idxx - 15 + 9:idxx + 9)) * 16/255, 1, 1,1) }
           GradientStop { position: 0.2; color: Qt.hsva((15 - (((idxx + 8) > 15) ? idxx - 15 + 8:idxx + 8)) * 16/255, 1, 1,1) }
           GradientStop { position: 0.3; color: Qt.hsva((15 - (((idxx + 7) > 15) ? idxx - 15 + 7:idxx + 7)) * 16/255, 1, 1,1) }
           GradientStop { position: 0.4; color: Qt.hsva((15 - (((idxx + 6) > 15) ? idxx - 15 + 6:idxx + 6)) * 16/255, 1, 1,1) }
           GradientStop { position: 0.5; color: Qt.hsva((15 - (((idxx + 5) > 15) ? idxx - 15 + 5:idxx + 5)) * 16/255, 1, 1,1) }
           GradientStop { position: 0.6; color: Qt.hsva((15 - (((idxx + 4) > 15) ? idxx - 15 + 4:idxx + 4)) * 16/255, 1, 1,1) }
           GradientStop { position: 0.7; color: Qt.hsva((15 - (((idxx + 3) > 15) ? idxx - 15 + 3:idxx + 3)) * 16/255, 1, 1,1) }
           GradientStop { position: 0.8; color: Qt.hsva((15 - (((idxx + 2) > 15) ? idxx - 15 + 2:idxx + 2)) * 16/255, 1, 1,1) }
           GradientStop { position: 0.9; color: Qt.hsva((15 - (((idxx + 1) > 15) ? idxx - 15 + 1:idxx + 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.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    FontGrade {
        id: bgagardad
        anchors.centerIn: parent
    }
}