From 674c5034ae26b2d0ce07ae51efba69053f24563f Mon Sep 17 00:00:00 2001 From: Devin Lin Date: Thu, 11 Sep 2025 10:13:26 -0400 Subject: [PATCH] animations: Use Kirigami units and speed up several of them 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. --- .../qml/actiondrawer/ActionDrawer.qml | 4 +++- .../private/QuickSettingsDelegate.qml | 2 +- .../qml/components/StartupFeedbackWindows.qml | 8 +++---- .../mobileshell/qml/statusbar/TaskWidget.qml | 2 +- .../homescreens/folio/homescreenstate.cpp | 23 +++++++++---------- .../homescreens/folio/qml/FavouritesBar.qml | 2 +- .../homescreens/folio/qml/FolderView.qml | 6 ++--- .../qml/delegate/WidgetDelegateConfig.qml | 4 ++-- .../folio/qml/private/WidgetResizeHandle.qml | 4 +++- .../qml/private/WidgetResizeHandleFrame.qml | 8 +++---- .../folio/qml/settings/SettingsWindow.qml | 2 +- .../homescreens/halcyon/qml/FavoritesGrid.qml | 2 +- .../homescreens/halcyon/qml/FavoritesView.qml | 10 ++++---- .../homescreens/halcyon/qml/GridAppList.qml | 2 +- .../homescreens/halcyon/qml/HomeScreen.qml | 2 +- .../homescreens/halcyon/qml/SearchWidget.qml | 2 +- .../halcyon/qml/settings/SettingsWindow.qml | 2 +- .../package/contents/ui/Task.qml | 2 +- .../package/contents/ui/TaskSwitcher.qml | 4 ++-- shell/contents/lockscreen/Keypad.qml | 2 +- shell/contents/lockscreen/LockScreen.qml | 2 +- 21 files changed, 49 insertions(+), 46 deletions(-) diff --git a/components/mobileshell/qml/actiondrawer/ActionDrawer.qml b/components/mobileshell/qml/actiondrawer/ActionDrawer.qml index cf15ba00..31651454 100644 --- a/components/mobileshell/qml/actiondrawer/ActionDrawer.qml +++ b/components/mobileshell/qml/actiondrawer/ActionDrawer.qml @@ -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: { diff --git a/components/mobileshell/qml/actiondrawer/private/QuickSettingsDelegate.qml b/components/mobileshell/qml/actiondrawer/private/QuickSettingsDelegate.qml index 84afa96b..4b1abcd1 100644 --- a/components/mobileshell/qml/actiondrawer/private/QuickSettingsDelegate.qml +++ b/components/mobileshell/qml/actiondrawer/private/QuickSettingsDelegate.qml @@ -45,7 +45,7 @@ MobileShell.BaseItem { property real zoomScale: 1 Behavior on zoomScale { NumberAnimation { - duration: 200 + duration: Kirigami.Units.longDuration easing.type: Easing.OutExpo } } diff --git a/components/mobileshell/qml/components/StartupFeedbackWindows.qml b/components/mobileshell/qml/components/StartupFeedbackWindows.qml index a7547e40..85c51f19 100644 --- a/components/mobileshell/qml/components/StartupFeedbackWindows.qml +++ b/components/mobileshell/qml/components/StartupFeedbackWindows.qml @@ -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 { } } } -} \ No newline at end of file +} diff --git a/components/mobileshell/qml/statusbar/TaskWidget.qml b/components/mobileshell/qml/statusbar/TaskWidget.qml index 59dd7616..d96dbee0 100644 --- a/components/mobileshell/qml/statusbar/TaskWidget.qml +++ b/components/mobileshell/qml/statusbar/TaskWidget.qml @@ -17,7 +17,7 @@ Item { Behavior on opacity { NumberAnimation { - duration: 300 + duration: Kirigami.Units.longDuration easing.type: Easing.InOutQuad } } diff --git a/containments/homescreens/folio/homescreenstate.cpp b/containments/homescreens/folio/homescreenstate.cpp index 1afbd10b..8aa6f27e 100644 --- a/containments/homescreens/folio/homescreenstate.cpp +++ b/containments/homescreens/folio/homescreenstate.cpp @@ -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); diff --git a/containments/homescreens/folio/qml/FavouritesBar.qml b/containments/homescreens/folio/qml/FavouritesBar.qml index 0ddaa237..4f542038 100644 --- a/containments/homescreens/folio/qml/FavouritesBar.qml +++ b/containments/homescreens/folio/qml/FavouritesBar.qml @@ -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 diff --git a/containments/homescreens/folio/qml/FolderView.qml b/containments/homescreens/folio/qml/FolderView.qml index e8e03e43..8b3888e0 100644 --- a/containments/homescreens/folio/qml/FolderView.qml +++ b/containments/homescreens/folio/qml/FolderView.qml @@ -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 diff --git a/containments/homescreens/folio/qml/delegate/WidgetDelegateConfig.qml b/containments/homescreens/folio/qml/delegate/WidgetDelegateConfig.qml index d2d20d86..1f28f5c8 100644 --- a/containments/homescreens/folio/qml/delegate/WidgetDelegateConfig.qml +++ b/containments/homescreens/folio/qml/delegate/WidgetDelegateConfig.qml @@ -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 { diff --git a/containments/homescreens/folio/qml/private/WidgetResizeHandle.qml b/containments/homescreens/folio/qml/private/WidgetResizeHandle.qml index 9b26ee61..6520e423 100644 --- a/containments/homescreens/folio/qml/private/WidgetResizeHandle.qml +++ b/containments/homescreens/folio/qml/private/WidgetResizeHandle.qml @@ -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 diff --git a/containments/homescreens/folio/qml/private/WidgetResizeHandleFrame.qml b/containments/homescreens/folio/qml/private/WidgetResizeHandleFrame.qml index f207e9b1..8c385cff 100644 --- a/containments/homescreens/folio/qml/private/WidgetResizeHandleFrame.qml +++ b/containments/homescreens/folio/qml/private/WidgetResizeHandleFrame.qml @@ -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 } } diff --git a/containments/homescreens/folio/qml/settings/SettingsWindow.qml b/containments/homescreens/folio/qml/settings/SettingsWindow.qml index 8aa01e29..7941d366 100644 --- a/containments/homescreens/folio/qml/settings/SettingsWindow.qml +++ b/containments/homescreens/folio/qml/settings/SettingsWindow.qml @@ -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) { diff --git a/containments/homescreens/halcyon/qml/FavoritesGrid.qml b/containments/homescreens/halcyon/qml/FavoritesGrid.qml index 28e401f4..af022b78 100644 --- a/containments/homescreens/halcyon/qml/FavoritesGrid.qml +++ b/containments/homescreens/halcyon/qml/FavoritesGrid.qml @@ -202,7 +202,7 @@ MobileShell.GridView { id: folderAnim target: appDelegate properties: "dragFolderAnimationProgress" - duration: 100 + duration: Kirigami.Units.shortDuration } } diff --git a/containments/homescreens/halcyon/qml/FavoritesView.qml b/containments/homescreens/halcyon/qml/FavoritesView.qml index 43d46c37..b22fa930 100644 --- a/containments/homescreens/halcyon/qml/FavoritesView.qml +++ b/containments/homescreens/halcyon/qml/FavoritesView.qml @@ -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 } diff --git a/containments/homescreens/halcyon/qml/GridAppList.qml b/containments/homescreens/halcyon/qml/GridAppList.qml index 25e6a9f9..931b9fe2 100644 --- a/containments/homescreens/halcyon/qml/GridAppList.qml +++ b/containments/homescreens/halcyon/qml/GridAppList.qml @@ -49,7 +49,7 @@ MobileShell.GridView { NumberAnimation on contentY { id: goToBeginningAnim to: gridView.originY - duration: 200 + duration: Kirigami.Units.longDuration easing.type: Easing.InOutQuad } diff --git a/containments/homescreens/halcyon/qml/HomeScreen.qml b/containments/homescreens/halcyon/qml/HomeScreen.qml index 16ef3a33..3a3dffee 100644 --- a/containments/homescreens/halcyon/qml/HomeScreen.qml +++ b/containments/homescreens/halcyon/qml/HomeScreen.qml @@ -37,7 +37,7 @@ Item { signal wallpaperSelectorTriggered() Behavior on settingsOpenFactor { - NumberAnimation { duration: 200 } + NumberAnimation { duration: Kirigami.Units.longDuration } } function triggerHomescreen() { diff --git a/containments/homescreens/halcyon/qml/SearchWidget.qml b/containments/homescreens/halcyon/qml/SearchWidget.qml index b8569108..7f40a537 100644 --- a/containments/homescreens/halcyon/qml/SearchWidget.qml +++ b/containments/homescreens/halcyon/qml/SearchWidget.qml @@ -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: { diff --git a/containments/homescreens/halcyon/qml/settings/SettingsWindow.qml b/containments/homescreens/halcyon/qml/settings/SettingsWindow.qml index 28b35bf4..5a91fe98 100644 --- a/containments/homescreens/halcyon/qml/settings/SettingsWindow.qml +++ b/containments/homescreens/halcyon/qml/settings/SettingsWindow.qml @@ -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) { diff --git a/kwin/mobiletaskswitcher/package/contents/ui/Task.qml b/kwin/mobiletaskswitcher/package/contents/ui/Task.qml index 9fa6254c..746398ee 100644 --- a/kwin/mobiletaskswitcher/package/contents/ui/Task.qml +++ b/kwin/mobiletaskswitcher/package/contents/ui/Task.qml @@ -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 } } diff --git a/kwin/mobiletaskswitcher/package/contents/ui/TaskSwitcher.qml b/kwin/mobiletaskswitcher/package/contents/ui/TaskSwitcher.qml index 48b0752e..16895254 100644 --- a/kwin/mobiletaskswitcher/package/contents/ui/TaskSwitcher.qml +++ b/kwin/mobiletaskswitcher/package/contents/ui/TaskSwitcher.qml @@ -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 diff --git a/shell/contents/lockscreen/Keypad.qml b/shell/contents/lockscreen/Keypad.qml index 35f88400..417ae09b 100644 --- a/shell/contents/lockscreen/Keypad.qml +++ b/shell/contents/lockscreen/Keypad.qml @@ -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 } } } diff --git a/shell/contents/lockscreen/LockScreen.qml b/shell/contents/lockscreen/LockScreen.qml index d66a2558..3d7b9584 100644 --- a/shell/contents/lockscreen/LockScreen.qml +++ b/shell/contents/lockscreen/LockScreen.qml @@ -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