1.実現効果図
それがあなたが探している効果であるかどうかを確認しますか？確信がある場合は、読み続けるか、次の記事を参照してください。
QML LinearGradientは、テキストの段階的な点滅アニメーションを実現します
2.実装の原則
この関数の実装は非常に簡単です。プロセスは次のとおりです
。1。まず、各単語を分割します。つまり、文字列を複数の文字に分割し、各文字のテキストを
定義します。2。文字の色を定義します。変数値をバインドします。3
。タイマーを定義し、色に対応する変数値をリアルタイムで更新します。
3.コアコードの概要
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);
}
4つのテキストオブジェクトが上で定義されており、それぞれに文字が含まれています。idxは色でバインドされ、idxは1〜15でループされるため、変換する色は15色あり、異なるidx値は異なる色値に対応します。段階的な効果を得るには、4つの字幕の色が隣接している必要があります。コードで指定されている4文字の色の添え字は、合計15個あるため
、[idx + 3、idx + 2、idx + 1、idx]
に対応します。色については、色の周期的な変化を実現するために、計算された添え字の残りを15にする必要があります。
Timer {
id:timer
interval: 100
running: true
repeat: true
onTriggered: {
if (idx + 1 < 15) {
idx += 1;
} else {
idx = 0;
}
console.log((15 - idx) * 16)
}
}
タイマーはカラーグラデーションの中核です。間隔は100msです。デフォルトで開始され、繰り返し実行されます。タイマー応答関数は非常に単純で、idxをインクリメントするだけです。
4.実装コード
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();
}
}
より良い実装方法があれば、コメント欄にメッセージを残してください、ありがとうございます。