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 { SequentialAnimation {
PropertyAnimation { PropertyAnimation {
id: drawerAnimation 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 { ScriptAction {
script: { script: {

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

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

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

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

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

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

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

@ -37,10 +37,9 @@ HomeScreenState::HomeScreenState(HomeScreen *parent)
void HomeScreenState::init() void HomeScreenState::init()
{ {
const int expoDuration = 800; const int animDuration = 400; // Kirigami.Units.veryLongDuration
const int cubicDuration = 400;
m_openAppDrawerAnim = setupAnimation("appDrawerY", expoDuration, QEasingCurve::OutExpo, 0); m_openAppDrawerAnim = setupAnimation("appDrawerY", animDuration, QEasingCurve::OutExpo, 0);
connect(m_openAppDrawerAnim, &QPropertyAnimation::valueChanged, this, [this]() { connect(m_openAppDrawerAnim, &QPropertyAnimation::valueChanged, this, [this]() {
// the animation runs too long to connect to QPropertyAnimation::finished // 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]() { connect(m_closeAppDrawerAnim, &QPropertyAnimation::valueChanged, this, [this]() {
// the animation runs too long to connect to QPropertyAnimation::finished // 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]() { connect(m_openSearchWidgetAnim, &QPropertyAnimation::finished, this, [this]() {
setViewState(ViewState::SearchWidgetView); 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]() { connect(m_closeSearchWidgetAnim, &QPropertyAnimation::finished, this, [this]() {
setViewState(ViewState::PageView); 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]() { connect(m_openFolderAnim, &QPropertyAnimation::finished, this, [this]() {
setViewState(ViewState::FolderView); 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]() { connect(m_closeFolderAnim, &QPropertyAnimation::finished, this, [this]() {
setViewState(ViewState::PageView); setViewState(ViewState::PageView);
@ -97,15 +96,15 @@ void HomeScreenState::init()
Q_EMIT leftCurrentFolder(); 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]() { connect(m_openSettingsAnim, &QPropertyAnimation::finished, this, [this]() {
setViewState(ViewState::SettingsView); 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]() { connect(m_closeSettingsAnim, &QPropertyAnimation::finished, this, [this]() {
setViewState(ViewState::PageView); 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 // get the normalized index position value from the center so we can animate it
property double fromCenterValue: model.index - (repeater.count / 2) property double fromCenterValue: model.index - (repeater.count / 2)
Behavior on fromCenterValue { 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 // 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 rowValue: model.rowIndex
property double pageValue: model.pageIndex property double pageValue: model.pageIndex
Behavior on columnValue { Behavior on columnValue {
NumberAnimation { duration: 250; easing.type: Easing.InOutQuad } NumberAnimation { duration: Kirigami.Units.longDuration; easing.type: Easing.InOutQuad }
} }
Behavior on rowValue { Behavior on rowValue {
NumberAnimation { duration: 250; easing.type: Easing.InOutQuad } NumberAnimation { duration: Kirigami.Units.longDuration; easing.type: Easing.InOutQuad }
} }
Behavior on pageValue { 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 // 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 // in case this gets stuck open over the homescreen, just close on tap
onClicked: close() onClicked: close()
NumberAnimation on opacity { id: configOverlayOpacityAnim; duration: 200 } NumberAnimation on opacity { id: configOverlayOpacityAnim; duration: Kirigami.Units.longDuration }
function open() { function open() {
configOverlayOpacityAnim.to = 1; configOverlayOpacityAnim.to = 1;
@ -135,7 +135,7 @@ Item {
QQC2.Overlay.modal: Item {} QQC2.Overlay.modal: Item {}
exit: Transition { 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 { Connections {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -42,7 +42,7 @@ Window {
NumberAnimation on opacity { NumberAnimation on opacity {
id: opacityAnim id: opacityAnim
duration: 200 duration: Kirigami.Units.longDuration
easing.type: Easing.OutCubic easing.type: Easing.OutCubic
onFinished: { onFinished: {
if (applicationItem.opacity === 0) { 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 property real zoomScale: control.pressed ? 0.95 : 1
Behavior on zoomScale { Behavior on zoomScale {
NumberAnimation { NumberAnimation {
duration: 200 duration: Kirigami.Units.longDuration
easing.type: Easing.OutExpo easing.type: Easing.OutExpo
} }
} }

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

@ -592,7 +592,7 @@ FocusScope {
id: closeAnim id: closeAnim
running: false running: false
to: 0 to: 0
duration: 200 duration: Kirigami.Units.longDuration
easing.type: Easing.InOutQuad easing.type: Easing.InOutQuad
onFinished: { onFinished: {
@ -609,7 +609,7 @@ FocusScope {
let baseOpacity = ((root.tasksCount === 0 && !root.taskSwitcherHelpers.currentlyBeingClosed) ? 0.9 : 0); let baseOpacity = ((root.tasksCount === 0 && !root.taskSwitcherHelpers.currentlyBeingClosed) ? 0.9 : 0);
return root.taskSwitcherHelpers.gestureState == TaskSwitcherHelpers.GestureStates.TaskSwitcher ? baseOpacity : 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 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 Layout.topMargin: keypadVerticalContainer.visible ? Kirigami.Units.gridUnit * 3 : 0
Behavior on opacity { 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 property alias passwordBar: keypad.passwordBar
// Speed up animation when passwordless // Speed up animation when passwordless
animationDuration: root.lockScreenState.canBeUnlocked ? 400 : 800 animationDuration: Kirigami.Units.veryLongDuration
// Distance to swipe to fully open keypad // Distance to swipe to fully open keypad
keypadHeight: Kirigami.Units.gridUnit * 20 keypadHeight: Kirigami.Units.gridUnit * 20