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 import QtQuickUltralite.Extras 1.2 Item { id: root property bool active property bool isDayMode property alias valueText: textValue.text property color widgetColor Behavior on widgetColor { NumberAnimation { duration: 1000 } } states: [ State { name: "dayMode" when: isDayMode === true PropertyChanges { target: root widgetColor: Style.black } }, State { name: "nightMode" when: isDayMode !== true PropertyChanges { target: root widgetColor: Style.white } } ] ColorizedImage { id: icon source: "qrc:///images/small/range.png" color: widgetColor } Item { id: textsWrapper clip: true height: textValue.height width: 80 anchors.left: icon.right anchors.leftMargin: 10 Text { id: textValue font.pixelSize: 24 font.bold: false font.family: "Barlow-mono" color: widgetColor } StaticText { id: unit height: textValue.height anchors.baseline: textValue.baseline font.pixelSize: 20 font.family: "Barlow-mono" color: widgetColor text: "km" anchors.left: textValue.right anchors.leftMargin: 5 } } function hideElements() { icon.opacity = 0 textValue.x = -textsWrapper.width } onActiveChanged: { if (active) { startAnimation() } else { hiddingAnimation() } } function startAnimation() { startUpAnimation.start() } function hiddingAnimation() { hideAnimation.start() } ParallelAnimation { id: startUpAnimation ScriptAction { script: { root.opacity = 1 } } NumberAnimation { target: icon property: "opacity" from: 0 to: 1 duration: 500 easing.type: Easing.OutQuad } NumberAnimation { target: textValue property: "x" from: -textsWrapper.width to: 0 duration: 500 easing.type: Easing.OutQuad } } SequentialAnimation { id: hideAnimation NumberAnimation { target: root property: "opacity" to: 0 duration: 500 easing.type: Easing.OutQuad } ScriptAction { script: hideElements() } } Component.onCompleted: { hideElements() } }