C
Qt Quick Ultralite Motorcycle Cluster Demo
// Copyright (C) 2024 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial
import QtQuick 2.0
Item {
id: root
property bool isDayMode: false
property bool isDayModeOld: false
readonly property image sourceDayMode: "qrc:///images/bg/main-light.png"
readonly property image sourceNightMode: "qrc:///images/bg/main.png"
property int fadingTime: 500
property real imagesOpacity: 1
Behavior on opacity {
NumberAnimation {
duration: fadingTime
}
}
Image {
id: imageLeft
opacity: imagesOpacity
source: sourceNightMode
}
Image {
id: imageRight
anchors.right: parent.right
opacity: imagesOpacity
source: sourceNightMode
transform: Scale {
xScale: -1
origin.x: imageLeft.width / 2
}
}
onIsDayModeChanged: {
if (isDayModeOld !== isDayMode) {
changeDayMode.start()
isDayModeOld = isDayMode
}
}
SequentialAnimation {
id: changeDayMode
PauseAnimation {
duration: 600
}
NumberAnimation {
target: root
property: "imagesOpacity"
to: 0
duration: fadingTime /*easing.type: Easing.OutCubic*/
}
ScriptAction {
script: {
imageLeft.source = isDayMode ? sourceDayMode : sourceNightMode
imageRight.source = isDayMode ? sourceDayMode : sourceNightMode
}
}
NumberAnimation {
target: root
property: "imagesOpacity"
to: 1
duration: fadingTime /*easing.type: Easing.OutCubic*/
}
}
}