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
}
}
}
}