C
Qt Quick Ultralite Motorcycle Cluster Demo
// Copyright (C) 2024 The Qt Company Ltd. // SPDX-License-Identifier: LicenseRef-Qt-Commercial 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 } } } }