Respect animation settings in navigation tutorial

Gate the navigation KCM tutorial timings on ShellSettings animationsEnabled so the demo stops animating when the user disables shell animations.
This commit is contained in:
Marco Allegretti 2026-05-21 11:15:01 +02:00
parent 753909a6ce
commit 24e410c733
2 changed files with 42 additions and 31 deletions

View file

@ -8,6 +8,7 @@ import QtQuick.Layouts
import org.kde.plasma.components 3.0 as PlasmaComponents import org.kde.plasma.components 3.0 as PlasmaComponents
import org.kde.kirigami as Kirigami import org.kde.kirigami as Kirigami
import org.kde.plasma.private.mobileshell.shellsettingsplugin as ShellSettings
Item { Item {
id: root id: root
@ -20,7 +21,16 @@ Item {
property bool showBackground: true property bool showBackground: true
property int fingerSize: 20 property int fingerSize: 20
property int _endTimeout: 2000 readonly property bool animationsEnabled: ShellSettings.Settings.animationsEnabled
readonly property int longAnimationDuration: animationsEnabled ? Kirigami.Units.longDuration : 0
readonly property int switcherDragDuration: animationsEnabled ? Math.round(Kirigami.Units.veryLongDuration * 3.75) : 0
readonly property int switcherSlideDuration: animationsEnabled ? Math.round(Kirigami.Units.veryLongDuration * 1.25) : 0
readonly property int flickDragDuration: animationsEnabled ? Math.round(Kirigami.Units.veryLongDuration * 2.25) : 0
readonly property int scrubSettleDuration: animationsEnabled ? Math.round(Kirigami.Units.veryLongDuration * 1.75) : 0
readonly property int quickAnimationDuration: animationsEnabled ? Math.round(Kirigami.Units.longDuration * 1.2) : 0
readonly property int sequencePauseDuration: animationsEnabled ? Math.round(Kirigami.Units.veryLongDuration * 1.25) : 0
readonly property int scrubLeadInDelay: animationsEnabled ? Kirigami.Units.veryLongDuration : 0
readonly property int _endTimeout: animationsEnabled ? Kirigami.Units.veryLongDuration * 5 : 0
Rectangle { Rectangle {
id: phone id: phone
@ -213,7 +223,7 @@ Item {
root.touchOnAnim.start() root.touchOnAnim.start()
} }
duration: 1500 duration: root.switcherDragDuration
easing.type: Easing.InOutQuad easing.type: Easing.InOutQuad
}, },
NumberAnimation { NumberAnimation {
@ -222,7 +232,7 @@ Item {
to: 0 to: 0
duration: Kirigami.Units.longDuration duration: root.longAnimationDuration
easing.type: Easing.InQuad easing.type: Easing.InQuad
}, },
NumberAnimation { NumberAnimation {
@ -236,7 +246,7 @@ Item {
touchPoint.yPosition = 2; touchPoint.yPosition = 2;
root.touchOnAnim.start() root.touchOnAnim.start()
} }
duration: 500 duration: root.switcherSlideDuration
easing.type: Easing.InOutQuad easing.type: Easing.InOutQuad
}, },
NumberAnimation { NumberAnimation {
@ -245,14 +255,14 @@ Item {
to: 0 to: 0
duration: Kirigami.Units.longDuration duration: root.longAnimationDuration
easing.type: Easing.InQuad easing.type: Easing.InQuad
} }
] ]
delays: [ delays: [
500, root.sequencePauseDuration,
500, root.sequencePauseDuration,
-Kirigami.Units.longDuration * 2, -root.longAnimationDuration * 2,
] ]
} }
@ -288,7 +298,7 @@ Item {
to: 0.55 to: 0.55
duration: Kirigami.Units.longDuration duration: root.longAnimationDuration
easing.type: Easing.InOutQuad easing.type: Easing.InOutQuad
}, },
NumberAnimation { NumberAnimation {
@ -297,7 +307,7 @@ Item {
to: 0 to: 0
duration: Kirigami.Units.longDuration duration: root.longAnimationDuration
easing.type: Easing.InOutQuad easing.type: Easing.InOutQuad
}, },
NumberAnimation { NumberAnimation {
@ -339,7 +349,7 @@ Item {
root.touchOnAnim.start() root.touchOnAnim.start()
} }
duration: 900 duration: root.flickDragDuration
easing.type: Easing.InQuart easing.type: Easing.InQuart
}, },
NumberAnimation { NumberAnimation {
@ -348,12 +358,12 @@ Item {
to: 0 to: 0
duration: Kirigami.Units.longDuration duration: root.longAnimationDuration
easing.type: Easing.InQuad easing.type: Easing.InQuad
} }
] ]
delays: [ delays: [
-Kirigami.Units.longDuration, -root.longAnimationDuration,
] ]
} }
@ -390,7 +400,7 @@ Item {
to: 0.1 to: 0.1
duration: 300 duration: root.quickAnimationDuration
easing.type: Easing.InQuad easing.type: Easing.InQuad
}, },
NumberAnimation { NumberAnimation {
@ -399,7 +409,7 @@ Item {
to: 0 to: 0
duration: 300 duration: root.quickAnimationDuration
easing.type: Easing.Linear easing.type: Easing.Linear
} }
] ]
@ -433,7 +443,7 @@ Item {
root.touchOnAnim.start() root.touchOnAnim.start()
} }
duration: 900 duration: root.flickDragDuration
easing.type: Easing.InOutQuart easing.type: Easing.InOutQuart
}, },
NumberAnimation { NumberAnimation {
@ -443,7 +453,7 @@ Item {
from: 0 from: 0
to: 1 to: 1
duration: 1500 duration: root.switcherDragDuration
easing.type: Easing.InOutQuart easing.type: Easing.InOutQuart
}, },
NumberAnimation { NumberAnimation {
@ -452,7 +462,7 @@ Item {
to: 0.5 to: 0.5
duration: 700 duration: root.scrubSettleDuration
easing.type: Easing.InOutCubic easing.type: Easing.InOutCubic
}, },
NumberAnimation { NumberAnimation {
@ -461,14 +471,14 @@ Item {
to: 0 to: 0
duration: Kirigami.Units.longDuration duration: root.longAnimationDuration
easing.type: Easing.InQuad easing.type: Easing.InQuad
} }
] ]
delays: [ delays: [
0, 0,
0, 0,
500 root.sequencePauseDuration
] ]
} }
@ -505,7 +515,7 @@ Item {
to: 0.55 to: 0.55
duration: 300 duration: root.quickAnimationDuration
easing.type: Easing.InOutQuad easing.type: Easing.InOutQuad
}, },
NumberAnimation { NumberAnimation {
@ -514,7 +524,7 @@ Item {
to: 0 to: 0
duration: 300 duration: root.quickAnimationDuration
easing.type: Easing.InOutQuad easing.type: Easing.InOutQuad
}, },
NumberAnimation { NumberAnimation {
@ -541,7 +551,7 @@ Item {
to: 1 to: 1
duration: Kirigami.Units.longDuration duration: root.longAnimationDuration
easing.type: Easing.InOutQuad easing.type: Easing.InOutQuad
}, },
NumberAnimation { // move leftmost window out of the way, otherwise it overlaps NumberAnimation { // move leftmost window out of the way, otherwise it overlaps
@ -550,7 +560,7 @@ Item {
to: 1.8 to: 1.8
duration: Kirigami.Units.longDuration duration: root.longAnimationDuration
easing.type: Easing.InOutQuad easing.type: Easing.InOutQuad
}, },
NumberAnimation { // move middle window (that's to be focused) a bit to the side to counteract moving of the first window NumberAnimation { // move middle window (that's to be focused) a bit to the side to counteract moving of the first window
@ -559,7 +569,7 @@ Item {
to: 0.4 to: 0.4
duration: Kirigami.Units.longDuration duration: root.longAnimationDuration
easing.type: Easing.Linear easing.type: Easing.Linear
}, },
NumberAnimation { // move first (rightmost) window to get a bit more space between it and the middle one during the animation NumberAnimation { // move first (rightmost) window to get a bit more space between it and the middle one during the animation
@ -568,14 +578,14 @@ Item {
to: 1 to: 1
duration: Kirigami.Units.longDuration duration: root.longAnimationDuration
easing.type: Easing.Linear easing.type: Easing.Linear
} }
] ]
delays: [ delays: [
400, root.scrubLeadInDelay,
immediate, immediate,
scrubAnimation.animations[0].duration - 300 - 400, scrubAnimation.animations[0].duration - root.quickAnimationDuration - root.scrubLeadInDelay,
scrubAnimation.delays[1], scrubAnimation.delays[1],
scrubAnimation.delays[2], scrubAnimation.delays[2],
immediate, immediate,
@ -655,7 +665,7 @@ Item {
to: 0 to: 0
duration: Kirigami.Units.longDuration duration: root.longAnimationDuration
easing.type: Easing.InQuad easing.type: Easing.InQuad
} }
@ -665,7 +675,7 @@ Item {
to: root.fingerSize to: root.fingerSize
duration: Kirigami.Units.longDuration duration: root.longAnimationDuration
easing.type: Easing.OutQuad easing.type: Easing.OutQuad
} }
} }

View file

@ -15,6 +15,7 @@ import org.kde.plasma.private.mobileshell.shellsettingsplugin as ShellSettings
KCM.SimpleKCM { KCM.SimpleKCM {
id: root id: root
readonly property int longAnimationDuration: ShellSettings.Settings.animationsEnabled ? Kirigami.Units.longDuration : 0
title: i18n("Navigation") title: i18n("Navigation")
@ -140,7 +141,7 @@ KCM.SimpleKCM {
to: -tutorialSwitcherInput.activeTutorialIndex * (tutorialContainer.phoneWidth + tutorialLayout.spacing) to: -tutorialSwitcherInput.activeTutorialIndex * (tutorialContainer.phoneWidth + tutorialLayout.spacing)
duration: Kirigami.Units.longDuration duration: root.longAnimationDuration
easing.type: Easing.InOutQuad easing.type: Easing.InOutQuad
} }
} }