marcoallegretti/shift-shell
1
0
Fork 0
mirror of https://invent.kde.org/marcoa/shift-shell.git synced 2026-04-26 14:23:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

animations: Use Kirigami units and speed up several of them

Browse source 
This converts many of the animation durations to Kirigami units so that
they can be controlled system wide. It also speeds up several of the
animation durations (ex. in folio) from 800ms to 400ms to improve the
feel and responsiveness of the shell.
This commit is contained in:
Devin Lin 2025-09-11 10:13:26 -04:00
parent 3a2cd8d521
commit 674c5034ae
21 changed files with 49 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
components/mobileshell/qml/actiondrawer/ActionDrawer.qml
View file

@ -264,7 +264,9 @@ Item {
SequentialAnimation {
PropertyAnimation {
id: drawerAnimation
properties: "offset"; easing.type: Easing.OutExpo; duration: root.state != "" ? Kirigami.Units.veryLongDuration : 0
properties: "offset"
easing.type: Easing.OutExpo
duration: root.state != "" ? Kirigami.Units.veryLongDuration : 0
}
ScriptAction {
script: {

2
components/mobileshell/qml/actiondrawer/private/QuickSettingsDelegate.qml
View file

@ -45,7 +45,7 @@ MobileShell.BaseItem {
property real zoomScale: 1
Behavior on zoomScale {
NumberAnimation {
duration: 200
duration: Kirigami.Units.longDuration
easing.type: Easing.OutExpo
}
}

8
components/mobileshell/qml/components/StartupFeedbackWindows.qml
View file

@ -73,12 +73,12 @@ Item {
SequentialAnimation {
id: openAnimComplex
// slight pause to give slower devices time to catch up when the item becomes visible
PauseAnimation { duration: 20 }
// pause for background color to catch up
PauseAnimation { duration: 1 }
ParallelAnimation {
id: parallelAnim
property real animationDuration: Kirigami.Units.longDuration + Kirigami.Units.shortDuration
property real animationDuration: Kirigami.Units.longDuration
ScaleAnimator {
target: background
@ -225,4 +225,4 @@ Item {
}
}
}
}
}

2
components/mobileshell/qml/statusbar/TaskWidget.qml
View file

@ -17,7 +17,7 @@ Item {
Behavior on opacity {
NumberAnimation {
duration: 300
duration: Kirigami.Units.longDuration
easing.type: Easing.InOutQuad
}
}

23
containments/homescreens/folio/homescreenstate.cpp
View file

@ -37,10 +37,9 @@ HomeScreenState::HomeScreenState(HomeScreen *parent)
void HomeScreenState::init()
{
const int expoDuration = 800;
const int cubicDuration = 400;
const int animDuration = 400; // Kirigami.Units.veryLongDuration
m_openAppDrawerAnim = setupAnimation("appDrawerY", expoDuration, QEasingCurve::OutExpo, 0);
m_openAppDrawerAnim = setupAnimation("appDrawerY", animDuration, QEasingCurve::OutExpo, 0);
connect(m_openAppDrawerAnim, &QPropertyAnimation::valueChanged, this, [this]() {
// the animation runs too long to connect to QPropertyAnimation::finished
@ -51,7 +50,7 @@ void HomeScreenState::init()
}
});
m_closeAppDrawerAnim = setupAnimation("appDrawerY", expoDuration, QEasingCurve::OutExpo, APP_DRAWER_OPEN_DIST);
m_closeAppDrawerAnim = setupAnimation("appDrawerY", animDuration, QEasingCurve::OutExpo, APP_DRAWER_OPEN_DIST);
connect(m_closeAppDrawerAnim, &QPropertyAnimation::valueChanged, this, [this]() {
// the animation runs too long to connect to QPropertyAnimation::finished
@ -65,27 +64,27 @@ void HomeScreenState::init()
}
});
m_openSearchWidgetAnim = setupAnimation("searchWidgetY", cubicDuration, QEasingCurve::OutCubic, 0);
m_openSearchWidgetAnim = setupAnimation("searchWidgetY", animDuration, QEasingCurve::OutExpo, 0);
connect(m_openSearchWidgetAnim, &QPropertyAnimation::finished, this, [this]() {
setViewState(ViewState::SearchWidgetView);
});
m_closeSearchWidgetAnim = setupAnimation("searchWidgetY", cubicDuration, QEasingCurve::OutCubic, SEARCH_WIDGET_OPEN_DIST);
m_closeSearchWidgetAnim = setupAnimation("searchWidgetY", animDuration, QEasingCurve::OutExpo, SEARCH_WIDGET_OPEN_DIST);
connect(m_closeSearchWidgetAnim, &QPropertyAnimation::finished, this, [this]() {
setViewState(ViewState::PageView);
});
m_pageAnim = setupAnimation("pageViewX", cubicDuration, QEasingCurve::OutCubic, 0);
m_pageAnim = setupAnimation("pageViewX", animDuration, QEasingCurve::OutExpo, 0);
m_openFolderAnim = setupAnimation("folderOpenProgress", cubicDuration, QEasingCurve::OutCubic, 1.0);
m_openFolderAnim = setupAnimation("folderOpenProgress", animDuration, QEasingCurve::OutExpo, 1.0);
connect(m_openFolderAnim, &QPropertyAnimation::finished, this, [this]() {
setViewState(ViewState::FolderView);
});
m_closeFolderAnim = setupAnimation("folderOpenProgress", cubicDuration, QEasingCurve::OutCubic, 0.0);
m_closeFolderAnim = setupAnimation("folderOpenProgress", animDuration, QEasingCurve::OutExpo, 0.0);
connect(m_closeFolderAnim, &QPropertyAnimation::finished, this, [this]() {
setViewState(ViewState::PageView);
@ -97,15 +96,15 @@ void HomeScreenState::init()
Q_EMIT leftCurrentFolder();
});
m_folderPageAnim = setupAnimation("folderViewX", cubicDuration, QEasingCurve::OutCubic, 0);
m_folderPageAnim = setupAnimation("folderViewX", animDuration, QEasingCurve::OutExpo, 0);
m_openSettingsAnim = setupAnimation("settingsOpenProgress", cubicDuration, QEasingCurve::OutExpo, 1.0);
m_openSettingsAnim = setupAnimation("settingsOpenProgress", animDuration, QEasingCurve::OutExpo, 1.0);
connect(m_openSettingsAnim, &QPropertyAnimation::finished, this, [this]() {
setViewState(ViewState::SettingsView);
});
m_closeSettingsAnim = setupAnimation("settingsOpenProgress", cubicDuration, QEasingCurve::InOutExpo, 0.0);
m_closeSettingsAnim = setupAnimation("settingsOpenProgress", animDuration, QEasingCurve::InOutExpo, 0.0);
connect(m_closeSettingsAnim, &QPropertyAnimation::finished, this, [this]() {
setViewState(ViewState::PageView);

2
containments/homescreens/folio/qml/FavouritesBar.qml
View file

@ -65,7 +65,7 @@ MouseArea {
// get the normalized index position value from the center so we can animate it
property double fromCenterValue: model.index - (repeater.count / 2)
Behavior on fromCenterValue {
NumberAnimation { duration: 250; easing.type: Easing.InOutQuad; }
NumberAnimation { duration: Kirigami.Units.longDuration; easing.type: Easing.InOutQuad; }
}
// multiply the 'fromCenterValue' by the cell size to get the actual position

6
containments/homescreens/folio/qml/FolderView.qml
View file

@ -194,13 +194,13 @@ Folio.DelegateTouchArea {
property double rowValue: model.rowIndex
property double pageValue: model.pageIndex
Behavior on columnValue {
NumberAnimation { duration: 250; easing.type: Easing.InOutQuad }
NumberAnimation { duration: Kirigami.Units.longDuration; easing.type: Easing.InOutQuad }
}
Behavior on rowValue {
NumberAnimation { duration: 250; easing.type: Easing.InOutQuad }
NumberAnimation { duration: Kirigami.Units.longDuration; easing.type: Easing.InOutQuad }
}
Behavior on pageValue {
NumberAnimation { duration: 250; easing.type: Easing.InOutQuad }
NumberAnimation { duration: Kirigami.Units.longDuration; easing.type: Easing.InOutQuad }
}
// multiply the index values by the cell size to get the actual position

4
containments/homescreens/folio/qml/delegate/WidgetDelegateConfig.qml
View file

@ -69,7 +69,7 @@ Item {
// in case this gets stuck open over the homescreen, just close on tap
onClicked: close()
NumberAnimation on opacity { id: configOverlayOpacityAnim; duration: 200 }
NumberAnimation on opacity { id: configOverlayOpacityAnim; duration: Kirigami.Units.longDuration }
function open() {
configOverlayOpacityAnim.to = 1;
@ -135,7 +135,7 @@ Item {
QQC2.Overlay.modal: Item {}
exit: Transition {
NumberAnimation { property: "opacity"; duration: 200; from: 1.0; to: 0.0 }
NumberAnimation { property: "opacity"; duration: Kirigami.Units.longDuration; from: 1.0; to: 0.0 }
}
Connections {

4
containments/homescreens/folio/qml/private/WidgetResizeHandle.qml
View file

@ -3,6 +3,8 @@
import QtQuick
import org.kde.kirigami as Kirigami
import '../delegate'
MouseArea {
@ -84,7 +86,7 @@ MouseArea {
property real scaleFactor: root.pressed ? 1.2 : 1.0
Behavior on scaleFactor {
NumberAnimation { duration: 400; easing.type: Easing.OutExpo }
NumberAnimation { duration: Kirigami.Units.veryLongDuration; easing.type: Easing.OutExpo }
}
xScale: scaleFactor

8
containments/homescreens/folio/qml/private/WidgetResizeHandleFrame.qml
View file

@ -144,25 +144,25 @@ Item {
NumberAnimation on width {
id: widthAnim
duration: 200
duration: Kirigami.Units.longDuration
easing.type: Easing.InOutQuad
}
NumberAnimation on height {
id: heightAnim
duration: 200
duration: Kirigami.Units.longDuration
easing.type: Easing.InOutQuad
}
NumberAnimation on x {
id: xAnim
duration: 200
duration: Kirigami.Units.longDuration
easing.type: Easing.InOutQuad
}
NumberAnimation on y {
id: yAnim
duration: 200
duration: Kirigami.Units.longDuration
easing.type: Easing.InOutQuad
}
}

2
containments/homescreens/folio/qml/settings/SettingsWindow.qml
View file

@ -46,7 +46,7 @@ Window {
NumberAnimation on opacity {
id: opacityAnim
duration: 200
duration: Kirigami.Units.longDuration
easing.type: Easing.OutCubic
onFinished: {
if (applicationItem.opacity === 0) {

2
containments/homescreens/halcyon/qml/FavoritesGrid.qml
View file

@ -202,7 +202,7 @@ MobileShell.GridView {
id: folderAnim
target: appDelegate
properties: "dragFolderAnimationProgress"
duration: 100
duration: Kirigami.Units.shortDuration
}
}

10
containments/homescreens/halcyon/qml/FavoritesView.qml
View file

@ -155,7 +155,7 @@ Item {
target: favoritesGrid
properties: 'contentY'
to: favoritesGrid.originY
duration: 200
duration: Kirigami.Units.longDuration
easing.type: Easing.InOutQuad
}
@ -166,7 +166,7 @@ Item {
NumberAnimation {
target: favoritesGrid
properties: 'openFolderProgress'
duration: ShellSettings.Settings.animationsEnabled ? 200 : 0
duration: ShellSettings.Settings.animationsEnabled ? Kirigami.Units.longDuration : 0
to: 1
easing.type: Easing.InOutQuad
}
@ -176,7 +176,7 @@ Item {
NumberAnimation {
target: folderGrid
properties: 'openProgress'
duration: ShellSettings.Settings.animationsEnabled ? 200 : 0
duration: ShellSettings.Settings.animationsEnabled ? Kirigami.Units.longDuration : 0
to: 1
easing.type: Easing.InOutQuad
}
@ -190,7 +190,7 @@ Item {
NumberAnimation {
target: folderGrid
properties: 'openProgress'
duration: ShellSettings.Settings.animationsEnabled ? 200 : 0
duration: ShellSettings.Settings.animationsEnabled ? Kirigami.Units.longDuration : 0
to: 0
easing.type: Easing.InOutQuad
}
@ -200,7 +200,7 @@ Item {
NumberAnimation {
target: favoritesGrid
properties: 'openFolderProgress'
duration: ShellSettings.Settings.animationsEnabled ? 200 : 0
duration: ShellSettings.Settings.animationsEnabled ? Kirigami.Units.longDuration : 0
to: 0
easing.type: Easing.InOutQuad
}

2
containments/homescreens/halcyon/qml/GridAppList.qml
View file

@ -49,7 +49,7 @@ MobileShell.GridView {
NumberAnimation on contentY {
id: goToBeginningAnim
to: gridView.originY
duration: 200
duration: Kirigami.Units.longDuration
easing.type: Easing.InOutQuad
}

2
containments/homescreens/halcyon/qml/HomeScreen.qml
View file

@ -37,7 +37,7 @@ Item {
signal wallpaperSelectorTriggered()
Behavior on settingsOpenFactor {
NumberAnimation { duration: 200 }
NumberAnimation { duration: Kirigami.Units.longDuration }
}
function triggerHomescreen() {

2
containments/homescreens/halcyon/qml/SearchWidget.qml
View file

@ -112,7 +112,7 @@ Item {
NumberAnimation on contentY {
id: anim
duration: Kirigami.Units.longDuration * 2
duration: Kirigami.Units.longDuration
easing.type: Easing.OutQuad
running: false
onFinished: {

2
containments/homescreens/halcyon/qml/settings/SettingsWindow.qml
View file

@ -42,7 +42,7 @@ Window {
NumberAnimation on opacity {
id: opacityAnim
duration: 200
duration: Kirigami.Units.longDuration
easing.type: Easing.OutCubic
onFinished: {
if (applicationItem.opacity === 0) {

2
kwin/mobiletaskswitcher/package/contents/ui/Task.qml
View file

@ -220,7 +220,7 @@ Item {
property real zoomScale: control.pressed ? 0.95 : 1
Behavior on zoomScale {
NumberAnimation {
duration: 200
duration: Kirigami.Units.longDuration
easing.type: Easing.OutExpo
}
}

4
kwin/mobiletaskswitcher/package/contents/ui/TaskSwitcher.qml
View file

@ -592,7 +592,7 @@ FocusScope {
id: closeAnim
running: false
to: 0
duration: 200
duration: Kirigami.Units.longDuration
easing.type: Easing.InOutQuad
onFinished: {
@ -609,7 +609,7 @@ FocusScope {
let baseOpacity = ((root.tasksCount === 0 && !root.taskSwitcherHelpers.currentlyBeingClosed) ? 0.9 : 0);
return root.taskSwitcherHelpers.gestureState == TaskSwitcherHelpers.GestureStates.TaskSwitcher ? baseOpacity : 0;
}
Behavior on opacity { NumberAnimation { duration: 500 } }
Behavior on opacity { NumberAnimation { duration: Kirigami.Units.veryLongDuration } }
anchors.centerIn: container

2
shell/contents/lockscreen/Keypad.qml
View file

@ -126,7 +126,7 @@ Item {
Layout.topMargin: keypadVerticalContainer.visible ? Kirigami.Units.gridUnit * 3 : 0
Behavior on opacity {
NumberAnimation { duration: 200 }
NumberAnimation { duration: Kirigami.Units.shortDuration }
}
}

2
shell/contents/lockscreen/LockScreen.qml
View file

@ -108,7 +108,7 @@ Item {
property alias passwordBar: keypad.passwordBar
// Speed up animation when passwordless
animationDuration: root.lockScreenState.canBeUnlocked ? 400 : 800
animationDuration: Kirigami.Units.veryLongDuration
// Distance to swipe to fully open keypad
keypadHeight: Kirigami.Units.gridUnit * 20