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 import QtQuickUltralite.Extras 2.0 Item { id: root property bool active property int value Image { id: icon source: "images/big/range.png" } Item { id: textsWrapper clip: true height: 110 width: 40 anchors.bottom: icon.top anchors.bottomMargin: 10 StaticText { id: unit height: unit.width font.pixelSize: 28 font.family: "Barlow-mono" color: Style.white text: "km" anchors.bottom: textValue.top anchors.bottomMargin: 5 anchors.right: parent.right anchors.rightMargin: -10 transform: [ Rotation { origin.x: unit.width / 2 origin.y: unit.height / 2 angle: -90 } ] } Text { id: textValue height: textValue.width anchors.bottom: parent.bottom property int extraMargin anchors.bottomMargin: extraMargin anchors.left: parent.left anchors.leftMargin: 2 font.pixelSize: 38 font.family: "Barlow-mono" color: Style.white text: root.value transform: [ Rotation { origin.x: textValue.width / 2 origin.y: textValue.height / 2 angle: -90 } ] } } function hideElements() { icon.opacity = 0 textValue.extraMargin = -textsWrapper.height } 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: "extraMargin"; from: -textsWrapper.height; 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() } }