homescreens/folio: Add fade, stack, rotation transitions

This commit is contained in:
Devin Lin 2023-10-22 20:41:44 -07:00
parent fa8aa6e85f
commit da142b608c
3 changed files with 73 additions and 19 deletions

View file

@ -28,6 +28,9 @@ public:
enum PageTransitionEffect {
SlideTransition = 0,
CubeTransition = 1,
FadeTransition = 2,
StackTransition = 3,
RotationTransition = 4,
};
Q_ENUM(PageTransitionEffect)

View file

@ -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: [
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: {
if (Folio.FolioSettings.pageTransitionEffect !== Folio.FolioSettings.CubeTransition) {
return 0;
}
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)
}
}
}
}
}

View file

@ -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)