C

Qt Quick Ultralite Motorcycle Cluster Demo

/****************************************************************************** ** ** Copyright (C) 2020 The Qt Company Ltd. ** Contact: https://www.qt.io/licensing/ ** ** This file is part of the Qt Quick Ultralite module. ** ** $QT_BEGIN_LICENSE:COMM$ ** ** Commercial License Usage ** Licensees holding valid commercial Qt licenses may use this file in ** accordance with the commercial license agreement provided with the ** Software or, alternatively, in accordance with the terms contained in ** a written agreement between you and The Qt Company. For licensing terms ** and conditions see http://www.qt.io/terms-conditions. For further ** information use the contact form at http://www.qt.io/contact-us. ** ** $QT_END_LICENSE$ ** ******************************************************************************/
import QtQuick 2.15 Item { id: root height: 1300 property int counter: 0 readonly property int opacityAnimationDuration: 1000 readonly property int listingAnimationDuration: 1000 readonly property int elementsCount: 17 property bool active: false readonly property ListModel tachoElements: ListModel { id: tachoImagesModel ListElement {xPos: 138; yPos: 1181 } ListElement {xPos: 109; yPos: 1131 } ListElement {xPos: 78; yPos: 1062 } ListElement {xPos: 48; yPos: 1001} ListElement {xPos: 18; yPos: 931 } ListElement {xPos: 8; yPos: 856 } ListElement {xPos: 8; yPos: 780 } ListElement {xPos: 8; yPos: 707 } ListElement {xPos: 8; yPos: 631 } ListElement {xPos: 8; yPos: 558 } ListElement {xPos: 0; yPos: 488 } ListElement {xPos: 0; yPos: 408 } ListElement {xPos: 11; yPos: 334 } ListElement {xPos: 40; yPos: 265 } ListElement {xPos: 69; yPos: 199 } ListElement {xPos: 101; yPos: 142 } ListElement {xPos: 130; yPos: 83 } } Repeater { id: scale model: tachoElements Text { id: numberText text: index y: model.yPos x: model.xPos color: index>=13 ? Style.pureRed : Style.white opacity: index>=counter ? 0.0 : 1.0 font.pixelSize: 28.8 font.family: "Barlow-mono" Behavior on opacity { NumberAnimation{ duration: root.opacityAnimationDuration } } transform: [ Rotation { origin.x: numberText.width / 2 origin.y: numberText.height / 2 angle: -90 } ] } } 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 } } } }