Implement zoom navigation transition animation

This commit is contained in:
2024-07-12 21:23:23 +02:00
parent 9bea6c0d8d
commit 2b85dce86a
8 changed files with 73 additions and 45 deletions

59
AnimatedStackView.qml Normal file
View File

@@ -0,0 +1,59 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import EVChargerApp
StackView {
popEnter: Transition {
PropertyAnimation {
property: "opacity"
from: 0
to: 1
duration: 200
}
ScaleAnimator {
from: 2
to: 1
duration: 200
}
}
popExit: Transition {
PropertyAnimation {
property: "opacity"
from: 1
to: 0
duration: 200
}
ScaleAnimator {
from: 1
to: 0.5
duration: 200
}
}
pushEnter: Transition {
PropertyAnimation {
property: "opacity"
from: 0
to: 1
duration: 200
}
ScaleAnimator {
from: 0.5
to: 1
duration: 200
}
}
pushExit: Transition {
PropertyAnimation {
property: "opacity"
from: 1
to: 0
duration: 200
}
ScaleAnimator {
from: 1
to: 2
duration: 200
}
}
}

View File

@@ -12,6 +12,14 @@ Loader {
return loader.item.backPressed()
}
DevicesModel {
id: devicesModel
settings: theSettings
Component.onCompleted: start()
}
Component {
id: deviceList

View File

@@ -53,6 +53,7 @@ qt_add_qml_module(evcharger-app
AboutPage.qml
AccessPage.qml
AddDeviceScreen.qml
AnimatedStackView.qml
ApiKeyValueItem.qml
ApiSettingsPage.qml
AppInstance.qml

View File

@@ -3,7 +3,7 @@ import QtQuick.Controls
import QtQuick.Layouts
import EVChargerApp
StackView {
AnimatedStackView {
id: stackView
function backPressed() {

View File

@@ -3,7 +3,7 @@ import QtQuick.Controls
import QtQuick.Layouts
import EVChargerApp
StackView {
AnimatedStackView {
id: stackView
signal deviceSelected(url: string, password: string)
@@ -16,39 +16,6 @@ StackView {
return false
}
// pushEnter: Transition {
// PropertyAnimation {
// property: "opacity"
// from: 0
// to:1
// duration: 200
// }
// }
// pushExit: Transition {
// PropertyAnimation {
// property: "opacity"
// from: 1
// to:0
// duration: 200
// }
// }
// popEnter: Transition {
// PropertyAnimation {
// property: "opacity"
// from: 0
// to:1
// duration: 200
// }
// }
// popExit: Transition {
// PropertyAnimation {
// property: "opacity"
// from: 1
// to:0
// duration: 200
// }
// }
initialItem: BaseNavigationPage {
id: page
title: qsTr("Device list")
@@ -57,14 +24,6 @@ StackView {
id: cloudUrlsModel
}
DevicesModel {
id: devicesModel
settings: theSettings
Component.onCompleted: start()
}
headerItems: [
Button {
text: qsTr("App Settings")

View File

@@ -3,7 +3,7 @@ import QtQuick.Controls
import QtQuick.Layouts
import EVChargerApp
StackView {
AnimatedStackView {
id: stackView
function backPressed() {

View File

@@ -3,7 +3,7 @@ import QtQuick.Controls
import QtQuick.Layouts
import EVChargerApp
StackView {
AnimatedStackView {
id: stackView
function backPressed() {

1
qmldir
View File

@@ -3,6 +3,7 @@ module EVChargerApp
EVChargerApp 1.0 AboutPage.qml
EVChargerApp 1.0 AccessPage.qml
EVChargerApp 1.0 AddDeviceScreen.qml
EVChargerApp 1.0 AnimatedStackView.qml
EVChargerApp 1.0 ApiKeyValueItem.qml
EVChargerApp 1.0 ApiSettingsPage.qml
EVChargerApp 1.0 AppInstance.qml