QML LinearGradient实现文字渐变闪烁动画

最新推荐文章于 2024-04-01 14:28:21 发布

原创

最新推荐文章于 2024-04-01 14:28:21 发布 · 1.5k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#qml #qt

本文介绍使用QML实现字体渐变动画的方法。利用LinearGradient和GradientStop设置文字区域的颜色渐变效果，并通过SequentialAnimation和NumberAnimation实现动态变化。适用于文字数量不定的场景。

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,<