From da142b608cd64225e12b44772283fead1f0ad98c Mon Sep 17 00:00:00 2001 From: Devin Lin Date: Sun, 22 Oct 2023 20:41:44 -0700 Subject: [PATCH] homescreens/folio: Add fade, stack, rotation transitions --- .../homescreens/folio/foliosettings.h | 3 + .../package/contents/ui/HomeScreenPages.qml | 86 +++++++++++++++---- .../contents/ui/settings/SettingsWindow.qml | 3 + 3 files changed, 73 insertions(+), 19 deletions(-) diff --git a/containments/homescreens/folio/foliosettings.h b/containments/homescreens/folio/foliosettings.h index eb47a3d9..0e45fac2 100644 --- a/containments/homescreens/folio/foliosettings.h +++ b/containments/homescreens/folio/foliosettings.h @@ -28,6 +28,9 @@ public: enum PageTransitionEffect { SlideTransition = 0, CubeTransition = 1, + FadeTransition = 2, + StackTransition = 3, + RotationTransition = 4, }; Q_ENUM(PageTransitionEffect) diff --git a/containments/homescreens/folio/package/contents/ui/HomeScreenPages.qml b/containments/homescreens/folio/package/contents/ui/HomeScreenPages.qml index 3f9818e5..5b2306f9 100644 --- a/containments/homescreens/folio/package/contents/ui/HomeScreenPages.qml +++ b/containments/homescreens/folio/package/contents/ui/HomeScreenPages.qml @@ -39,28 +39,76 @@ MouseArea { readonly property real positionX: root.width * index + Folio.HomeScreenState.pageViewX readonly property real progressToCenter: 1 - Math.min(1, Math.max(0, distanceToCenter / root.width)) - opacity: 1 - Math.min(1, Math.max(0, distanceToCenter / root.width)) + visible: opacity > 0 + opacity: { + switch (Folio.FolioSettings.pageTransitionEffect) { + case Folio.FolioSettings.StackTransition: + return (positionX < 0) ? progressToCenter : + ((progressToCenter < 0.3) ? 0 : ((1 / 0.7) * (progressToCenter - 0.3))) + default: + return progressToCenter; + } + } // x position of page - transform: [ - Translate { - x: homeScreenPage.positionX - }, - Rotation { - origin.x: (positionX < 0) ? - (Folio.HomeScreenState.pageWidth / 2) * homeScreenPage.progressToCenter : - (Folio.HomeScreenState.pageWidth / 2) + (Folio.HomeScreenState.pageWidth / 2) * (1 - homeScreenPage.progressToCenter); - origin.y: Folio.HomeScreenState.pageHeight / 2; - axis { x: 0; y: 1; z: 0 } - angle: { - if (Folio.FolioSettings.pageTransitionEffect !== Folio.FolioSettings.CubeTransition) { - return 0; - } - - return Math.min(1, Math.max(0, distanceToCenter / root.width)) * 90 * ((positionX > 0) ? 1 : -1) - } + transform: { + switch (Folio.FolioSettings.pageTransitionEffect) { + case Folio.FolioSettings.SlideTransition: + return [translate]; + case Folio.FolioSettings.CubeTransition: + return [translate, cubeTransitionRotation]; + case Folio.FolioSettings.FadeTransition: + return []; + case Folio.FolioSettings.StackTransition: + return [stackScale, stackTranslate]; + case Folio.FolioSettings.RotationTransition: + return [translate, rotationTransitionRotation]; + default: + return [translate]; } - ] + } + + Translate { + id: translate + x: homeScreenPage.positionX + } + + Scale { + id: stackScale + origin.x: Folio.HomeScreenState.pageWidth / 2 + origin.y: Folio.HomeScreenState.pageHeight / 2 + xScale: (homeScreenPage.positionX < 0) ? 1 : 0.5 + homeScreenPage.progressToCenter * 0.5 + yScale: (homeScreenPage.positionX < 0) ? 1 : 0.5 + homeScreenPage.progressToCenter * 0.5 + } + + Translate { + id: stackTranslate + x: Math.min(0, homeScreenPage.positionX) + } + + Rotation { + id: cubeTransitionRotation + origin.x: (positionX < 0) ? + (Folio.HomeScreenState.pageWidth / 2) * homeScreenPage.progressToCenter : + (Folio.HomeScreenState.pageWidth / 2) + (Folio.HomeScreenState.pageWidth / 2) * (1 - homeScreenPage.progressToCenter); + origin.y: Folio.HomeScreenState.pageHeight / 2; + axis { x: 0; y: 1; z: 0 } + angle: { + return Math.min(1, Math.max(0, distanceToCenter / root.width)) * 90 * ((positionX > 0) ? 1 : -1) + } + } + + Rotation { + id: rotationTransitionRotation + origin.x: (positionX < 0) ? + (Folio.HomeScreenState.pageWidth / 2) * homeScreenPage.progressToCenter : + (Folio.HomeScreenState.pageWidth / 2) + (Folio.HomeScreenState.pageWidth / 2) * (1 - homeScreenPage.progressToCenter); + origin.y: 0 + axis { x: -0.2; y: 0.3; z: 0.5 } + angle: { + return Math.min(1, Math.max(0, distanceToCenter / root.width)) * 90 * ((positionX > 0) ? 1 : -1) + } + } } } } diff --git a/containments/homescreens/folio/package/contents/ui/settings/SettingsWindow.qml b/containments/homescreens/folio/package/contents/ui/settings/SettingsWindow.qml index 8e4693d9..8f6dde51 100644 --- a/containments/homescreens/folio/package/contents/ui/settings/SettingsWindow.qml +++ b/containments/homescreens/folio/package/contents/ui/settings/SettingsWindow.qml @@ -168,6 +168,9 @@ Kirigami.ApplicationWindow { Component.onCompleted: { append({"name": i18n("Slide"), "value": Folio.FolioSettings.SlideTransition}); append({"name": i18n("Cube"), "value": Folio.FolioSettings.CubeTransition}); + append({"name": i18n("Fade"), "value": Folio.FolioSettings.FadeTransition}); + append({"name": i18n("Stack"), "value": Folio.FolioSettings.StackTransition}); + append({"name": i18n("Rotation"), "value": Folio.FolioSettings.RotationTransition}); // indexOfValue doesn't bind to model changes unfortunately, set currentIndex manually here pageTransitionCombobox.currentIndex = pageTransitionCombobox.indexOfValue(Folio.FolioSettings.pageTransitionEffect)