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.14 Item { id: root width: clipedImage.width height: clipedImage.height enum HorizontalDirection { Right = 0, Left = 1 } property int horizontalDirection: ClipingItem.Right enum VerticalDirection { Down = 0, Up = 1 } property int verticalDirection: ClipingItem.Up property bool horizontalClipping: false property bool verticalClipping: false property bool active: false property int duration: 600 property alias running: clipingAnimation.running property bool isDayMode: true property image dayModeSource property image nightModeSource onIsDayModeChanged: { changeDayModeAnimation.start() } SequentialAnimation { id: changeDayModeAnimation PauseAnimation { duration: 600 } NumberAnimation { target: root; property: "opacity"; to: 0; duration: 500; easing.type: Easing.OutCubic } ScriptAction { script: clipedImage.source = isDayMode ? dayModeSource : nightModeSource } NumberAnimation { target: root; property: "opacity"; to: 1; duration: 500; easing.type: Easing.OutCubic } } Component.onCompleted: { clipedImage.source = nightModeSource } onActiveChanged: { if(active) { startAnimation() } else { hiddingAnimation() } } function startAnimation() { clipingAnimation.start() } function hiddingAnimation() { hidingAnimation.start() } Item { id: clipingItem height: root.verticalClipping ? 0 : clipedImage.height width: root.horizontalClipping ? 0 : clipedImage.width property int horizontalOffset : root.width - clipingItem.width property int verticalOffset: root.height - clipingItem.height anchors.left: root.left anchors.leftMargin: root.horizontalDirection === ClipingItem.Right ? 0 : clipingItem.horizontalOffset anchors.top: root.top anchors.topMargin: root.verticalDirection === ClipingItem.Down ? 0 : clipingItem.verticalOffset clip: true Image { id: clipedImage anchors.left: clipingItem.left anchors.leftMargin: root.horizontalDirection === ClipingItem.Right ? 0 : -clipingItem.horizontalOffset anchors.top: clipingItem.top anchors.topMargin: root.verticalDirection === ClipingItem.Down ? 0 : -clipingItem.verticalOffset } ParallelAnimation { id: clipingAnimation alwaysRunToEnd: true NumberAnimation { target: clipingItem property: "width" duration: root.duration to: clipedImage.width } NumberAnimation { target: clipingItem property: "height" duration: root.duration to: clipedImage.height } } ParallelAnimation { id: hidingAnimation alwaysRunToEnd: true NumberAnimation { target: clipingItem property: "width" duration: root.duration to: root.horizontalClipping ? 0 : clipedImage.width } NumberAnimation { target: clipingItem property: "height" duration: root.duration to: root.verticalClipping ? 0 : clipedImage.height } } } }