QML LinearGradient实现文字渐变闪烁动画-白红宇

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

阅读量：3625 次

发布时间：2019-05-21

本文共 2768 字，大约阅读时间需要 9 分钟。

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

1、LinearGradient

2、GradientStop

3、

4、

实现原理

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

实现代码

FontGrade.qml

import QtQuick 2.14import QtGraphicalEffects 1.14Rectangle {
      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.12import QtQuick.Window 2.12import QtQml 2.12Window {
       visible: true    width: 640    height: 480    title: qsTr("Hello World")    FontGrade {
           id: bgagardad        anchors.centerIn: parent    }}

转载地址：http://ixuun.baihongyu.com/

你可能感兴趣的文章