C
Qt Quick Ultralite Motorcycle Cluster Demo
// Copyright (C) 2024 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial
import QtQuick 2.4
Item {
id: root
width: 1050
property int counter: 0
readonly property int opacityAnimationDuration: 1000
readonly property int listingAnimationDuration: 1000
readonly property int elementsCount: 17
property bool active: false
property bool isDayMode: true
readonly property list tachoElements: [
Qt.point(0, 122),
Qt.point(53, 95),
Qt.point(113, 65),
Qt.point(170, 38),
Qt.point(234, 11),
Qt.point(306, 0),
Qt.point(377, 0),
Qt.point(447, 0),
Qt.point(518, 0),
Qt.point(585, 0),
Qt.point(650, 0),
Qt.point(728, 0),
Qt.point(792, 11),
Qt.point(858, 38),
Qt.point(918, 65),
Qt.point(974, 95),
Qt.point(1028, 122)
]
Repeater {
id: scale
model: root.tachoElements.length
Text {
text: index
y: root.tachoElements[index].y
x: root.tachoElements[index].x
color: index >= 13 ? Style.pureRed : (isDayMode ? Style.black : Style.white)
opacity: index >= counter ? 0.0 : 1.0
font.pixelSize: 18
font.family: "Barlow-mono"
Behavior on opacity {
NumberAnimation {
duration: root.opacityAnimationDuration
}
}
}
}
onActiveChanged: {
if (active) {
root.opacity = 1
startAnimation()
} else {
hiddingAnimation()
}
}
function startAnimation() {
showAnimation.start()
}
function hiddingAnimation() {
hideAnimation.start()
}
NumberAnimation {
id: showAnimation
target: root
property: "counter"
from: 0
to: root.elementsCount
duration: root.listingAnimationDuration
}
SequentialAnimation {
id: hideAnimation
NumberAnimation {
target: root
property: "opacity"
duration: 500
to: 0
}
ScriptAction {
script: {
root.counter = 0
}
}
}
}