1. Diagrama de efectos de realización
¿Comprueba si es el efecto que buscas? Si está seguro, continúe leyendo o puede consultar el siguiente artículo.
QML LinearGradient realiza una animación de parpadeo gradual del texto
2. Principio de implementación
La implementación de esta función es muy simple. El siguiente es el proceso:
1. Primero, divida cada palabra, es decir, divida una cadena en varios caracteres y defina un Texto para cada carácter;
2. Defina el color del carácter, y vincular un valor de variable
3. Defina un temporizador y actualice el valor de la variable correspondiente al color en tiempo real.
3. Introducción al código central
Text {
id: name
anchors.left: parent.left
height: 10
width: 30
text: qsTr("H")
font.pointSize: 30
font.bold: true
color: Qt.hsva((15 - (((idx + 3) > 15) ? idx - 12:idx + 3)) * 16/255, 1, 1,1);
}
Text {
id: name1
anchors.left: name.right
height: 10
width: 30
text: qsTr("E")
font.pointSize: 30
font.bold: true
color: Qt.hsva((15 - (((idx + 2) > 15) ? idx - 13:idx + 2)) * 16/255, 1, 1,1);
}
Text {
id: name2
anchors.left: name1.right
height: 10
width: 30
text: qsTr("R")
font.pointSize: 30
font.bold: true
color: Qt.hsva((15 - (((idx + 1) > 15) ? idx - 14:idx + 1)) * 16/255, 1, 1,1);
}
Text {
id: name3
anchors.left: name2.right
height: 10
width: 30
text: qsTr("O")
font.pointSize: 30
font.bold: true
color: Qt.hsva((15 - idx) * 16/255, 1, 1,1);
}
Cuatro objetos de texto se definen arriba, cada uno contiene una letra, e idx está limitado por el color, idx está enlazado de 1 a 15, por lo que hay 15 colores para transformar y diferentes valores de idx corresponden a diferentes valores de color. Para lograr el efecto gradual, los colores de los cuatro subtítulos deben ser adyacentes. Los subíndices de color de las cuatro letras dadas en el código corresponden a
[idx + 3, idx + 2, idx + 1, idx]
porque hay 15 en total Para el color, debe llevar el resto del subíndice calculado a 15 para darse cuenta del cambio cíclico de colores.
Timer {
id:timer
interval: 100
running: true
repeat: true
onTriggered: {
if (idx + 1 < 15) {
idx += 1;
} else {
idx = 0;
}
console.log((15 - idx) * 16)
}
}
El temporizador es el núcleo del degradado de color. El intervalo es de 100 ms. Se inicia de forma predeterminada y se ejecuta repetidamente. La función de respuesta del temporizador es muy simple, simplemente incremente idx.
4. Código de implementación
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQml 2.12
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
property int idx: 10
Rectangle {
anchors.centerIn: parent
width: 100
height: 60
Text {
id: name
anchors.left: parent.left
height: 10
width: 30
text: qsTr("H")
font.pointSize: 30
font.bold: true
color: Qt.hsva((15 - (((idx + 3) > 15) ? idx - 12:idx + 3)) * 16/255, 1, 1,1);
}
Text {
id: name1
anchors.left: name.right
height: 10
width: 30
text: qsTr("E")
font.pointSize: 30
font.bold: true
color: Qt.hsva((15 - (((idx + 2) > 15) ? idx - 13:idx + 2)) * 16/255, 1, 1,1);
}
Text {
id: name2
anchors.left: name1.right
height: 10
width: 30
text: qsTr("R")
font.pointSize: 30
font.bold: true
color: Qt.hsva((15 - (((idx + 1) > 15) ? idx - 14:idx + 1)) * 16/255, 1, 1,1);
}
Text {
id: name3
anchors.left: name2.right
height: 10
width: 30
text: qsTr("O")
font.pointSize: 30
font.bold: true
color: Qt.hsva((15 - idx) * 16/255, 1, 1,1);
}
}
Timer {
id:timer
interval: 100
running: true
repeat: true
onTriggered: {
if (idx + 1 < 15) {
idx += 1;
} else {
idx = 0;
}
console.log((15 - idx) * 16)
}
}
Component.onCompleted: {
timer.start();
}
}
Si tiene un método de implementación mejor, deje un mensaje en el área de comentarios, gracias.