diff --git a/Common/Anims.qml b/Common/Anims.qml index f416cb0f..f8c01b3e 100644 --- a/Common/Anims.qml +++ b/Common/Anims.qml @@ -7,44 +7,79 @@ import Quickshell Singleton { id: root + // Durations match M3 token tiers: short4/medium4/long4 readonly property int durShort: 200 - readonly property int durMed: 400 - readonly property int durLong: 600 + readonly property int durMed: 450 + readonly property int durLong: 600 readonly property int slidePx: 80 - - // Material Design 3 motion curves - readonly property var emphasized: [0.05, 0, 2/15, 0.06, 1/6, 0.4, 5/24, 0.82, 0.25, 1, 1, 1] - readonly property var emphasizedDecel: [0.05, 0.7, 0.1, 1, 1, 1] - readonly property var standard: [0.2, 0, 0, 1, 1, 1] - readonly property QtObject direction: QtObject { - readonly property int fromLeft: 0 - readonly property int fromRight: 1 - readonly property int fadeOnly: 2 - } + // Material Design 3 motion curves (for QML BezierSpline) + // Use groups of: [cx1, cy1, cx2, cy2, endX, endY, ...] + // Single-segment cubics end with 1,1. - readonly property Component slideInLeft: Transition { - NumberAnimation { properties: "x"; from: -Anims.slidePx; to: 0; duration: Anims.durMed; easing.type: Easing.OutQuart } - } + // Emphasized (multi-segment) – for on-screen-to-on-screen moves + readonly property var emphasized: [ + 0.05, 0.00, 0.133333, 0.06, 0.166667, 0.40, + 0.208333, 0.82, 0.25, 1.00, 1.00, 1.00 + ] - readonly property Component slideOutLeft: Transition { - NumberAnimation { properties: "x"; to: -Anims.slidePx; duration: Anims.durShort; easing.type: Easing.InQuart } - } + // Emphasized decelerate – entering + readonly property var emphasizedDecel: [ 0.05, 0.70, 0.10, 1.00, 1.00, 1.00 ] - readonly property Component slideInRight: Transition { - NumberAnimation { properties: "x"; from: Anims.slidePx; to: 0; duration: Anims.durMed; easing.type: Easing.OutQuart } - } + // Emphasized accelerate – exiting + readonly property var emphasizedAccel: [ 0.30, 0.00, 0.80, 0.15, 1.00, 1.00 ] - readonly property Component slideOutRight: Transition { - NumberAnimation { properties: "x"; to: Anims.slidePx; duration: Anims.durShort; easing.type: Easing.InQuart } - } + // Standard set – for small/subtle transitions + readonly property var standard: [ 0.20, 0.00, 0.00, 1.00, 1.00, 1.00 ] + readonly property var standardDecel: [ 0.00, 0.00, 0.00, 1.00, 1.00, 1.00 ] + readonly property var standardAccel: [ 0.30, 0.00, 1.00, 1.00, 1.00, 1.00 ] - readonly property Component fadeIn: Transition { - NumberAnimation { properties: "opacity"; from: 0.0; to: 1.0; duration: Anims.durMed; easing.type: Easing.OutQuart } - } + // readonly property QtObject direction: QtObject { + // readonly property int fromLeft: 0 + // readonly property int fromRight: 1 + // readonly property int fadeOnly: 2 + // } - readonly property Component fadeOut: Transition { - NumberAnimation { properties: "opacity"; to: 0.0; duration: Anims.durShort; easing.type: Easing.InQuart } - } -} + // // Slide transitions (surface/large moves) + // // Enter = emphasizedDecel, Exit = emphasizedAccel + // readonly property Component slideInLeft: Transition { + // NumberAnimation { + // properties: "x"; from: -root.slidePx; to: 0; duration: root.durMed + // easing.type: Easing.BezierSpline; easing.bezierCurve: root.emphasizedDecel + // } + // } + // readonly property Component slideOutLeft: Transition { + // NumberAnimation { + // properties: "x"; to: -root.slidePx; duration: root.durShort + // easing.type: Easing.BezierSpline; easing.bezierCurve: root.emphasizedAccel + // } + // } + // readonly property Component slideInRight: Transition { + // NumberAnimation { + // properties: "x"; from: root.slidePx; to: 0; duration: root.durMed + // easing.type: Easing.BezierSpline; easing.bezierCurve: root.emphasizedDecel + // } + // } + // readonly property Component slideOutRight: Transition { + // NumberAnimation { + // properties: "x"; to: root.slidePx; duration: root.durShort + // easing.type: Easing.BezierSpline; easing.bezierCurve: root.emphasizedAccel + // } + // } + + // // Fade transitions (small/subtle moves) + // // Enter = standardDecel, Exit = standardAccel + // readonly property Component fadeIn: Transition { + // NumberAnimation { + // properties: "opacity"; from: 0.0; to: 1.0; duration: root.durMed + // easing.type: Easing.BezierSpline; easing.bezierCurve: root.standardDecel + // } + // } + // readonly property Component fadeOut: Transition { + // NumberAnimation { + // properties: "opacity"; to: 0.0; duration: root.durShort + // easing.type: Easing.BezierSpline; easing.bezierCurve: root.standardAccel + // } + // } +} \ No newline at end of file diff --git a/Modules/ControlCenter/Audio/MicrophoneControl.qml b/Modules/ControlCenter/Audio/MicrophoneControl.qml index bc9f33ad..746e5e12 100644 --- a/Modules/ControlCenter/Audio/MicrophoneControl.qml +++ b/Modules/ControlCenter/Audio/MicrophoneControl.qml @@ -70,7 +70,9 @@ Column { Behavior on width { NumberAnimation { - duration: 100 + duration: Anims.durShort + easing.type: Easing.BezierSpline + easing.bezierCurve: Anims.standardDecel } } } @@ -90,7 +92,9 @@ Column { Behavior on scale { NumberAnimation { - duration: 150 + duration: Anims.durShort + easing.type: Easing.BezierSpline + easing.bezierCurve: Anims.standard } } diff --git a/Modules/Lock/LockScreenContent.qml b/Modules/Lock/LockScreenContent.qml index bab4d8af..8398e919 100644 --- a/Modules/Lock/LockScreenContent.qml +++ b/Modules/Lock/LockScreenContent.qml @@ -411,8 +411,8 @@ Item { SequentialAnimation on scale { running: root.unlocking - NumberAnimation { from: 0; to: 1.2; duration: 200; easing.type: Easing.OutBack } - NumberAnimation { from: 1.2; to: 1; duration: 150; easing.type: Easing.InBack } + NumberAnimation { from: 0; to: 1.2; duration: Anims.durShort; easing.type: Easing.BezierSpline; easing.bezierCurve: Anims.emphasizedDecel } + NumberAnimation { from: 1.2; to: 1; duration: Anims.durShort; easing.type: Easing.BezierSpline; easing.bezierCurve: Anims.emphasizedAccel } } } @@ -450,7 +450,7 @@ Item { RotationAnimation on rotation { running: pam.active && !root.unlocking loops: Animation.Infinite - duration: 1000 + duration: Anims.durLong from: 0 to: 360 } diff --git a/Modules/Notifications/NotificationPopup.qml b/Modules/Notifications/NotificationPopup.qml index 5530ceae..c88abe8a 100644 --- a/Modules/Notifications/NotificationPopup.qml +++ b/Modules/Notifications/NotificationPopup.qml @@ -27,19 +27,23 @@ PanelWindow { } margins { - top: Theme.barHeight + 16 + top: Theme.barHeight + 4 right: 12 } // Manager drives vertical stacking with this proxy: property int screenY: 0 - onScreenYChanged: margins.top = Theme.barHeight + 16 + screenY + onScreenYChanged: margins.top = Theme.barHeight + 4 + screenY // Disable vertical tween while exiting so there is never diagonal motion Behavior on screenY { id: screenYAnim enabled: !exiting - NumberAnimation { duration: 220; easing.type: Easing.OutCubic } + NumberAnimation { + duration: Anims.durShort + easing.type: Easing.BezierSpline + easing.bezierCurve: Anims.standardDecel + } } // State @@ -47,13 +51,12 @@ PanelWindow { signal entered() signal exitFinished() - // ---------------- CONTENT: animate this (not the Window) ---------------- Item { id: content anchors.fill: parent // We animate a Translate so anchors never override horizontal motion - transform: Translate { id: tx; x: 400 } // start off-screen right + transform: Translate { id: tx; x: Anims.slidePx } // start off-screen right // Optional: layer while animating for smoothness layer.enabled: (enterX.running || exitAnim.running) @@ -303,21 +306,37 @@ PanelWindow { } } - // ---------------- EXPLICIT ANIMATIONS (no Behavior races) ---------------- - // Entrance (guaranteed): 400 -> 0 + // Entrance: slide in from right using slowed Anims curves NumberAnimation { id: enterX - target: tx; property: "x"; from: 400; to: 0 - duration: 240; easing.type: Easing.OutCubic + target: tx; property: "x"; from: Anims.slidePx; to: 0 + duration: Anims.durMed + easing.type: Easing.BezierSpline + easing.bezierCurve: Anims.emphasizedDecel onStopped: if (!win.exiting && Math.abs(tx.x) < 0.5) win.entered(); } - // Exit (guaranteed): (x: 0 -> 96) + (opacity: 1 -> 0) + // Exit: slide out to right + fade using slowed Anims curves ParallelAnimation { id: exitAnim - PropertyAnimation { target: tx; property: "x"; from: 0; to: 96; duration: 200; easing.type: Easing.OutCubic } - NumberAnimation { target: content; property: "opacity"; from: 1; to: 0; duration: 200; easing.type: Easing.OutCubic } - NumberAnimation { target: content; property: "scale"; from: 1; to: 0.98; duration: 160; easing.type: Easing.OutCubic } + PropertyAnimation { + target: tx; property: "x"; from: 0; to: Anims.slidePx + duration: Anims.durShort + easing.type: Easing.BezierSpline + easing.bezierCurve: Anims.emphasizedAccel + } + NumberAnimation { + target: content; property: "opacity"; from: 1; to: 0 + duration: Anims.durShort + easing.type: Easing.BezierSpline + easing.bezierCurve: Anims.standardAccel + } + NumberAnimation { + target: content; property: "scale"; from: 1; to: 0.98 + duration: Anims.durShort + easing.type: Easing.BezierSpline + easing.bezierCurve: Anims.emphasizedAccel + } onStopped: finalizeExit("animStopped") } diff --git a/Modules/Notifications/NotificationPopupManager.qml b/Modules/Notifications/NotificationPopupManager.qml index de8f502a..9b2ec60b 100644 --- a/Modules/Notifications/NotificationPopupManager.qml +++ b/Modules/Notifications/NotificationPopupManager.qml @@ -5,8 +5,8 @@ import qs.Services QtObject { id: manager - property int topMargin: 48 - property int baseNotificationHeight: 132 + property int topMargin: 0 + property int baseNotificationHeight: 120 property int maxTargetNotifications: 3 property var popupWindows: [] // strong refs to windows (live until exitFinished) diff --git a/Modules/TopBar/AudioVisualization.qml b/Modules/TopBar/AudioVisualization.qml index 36acdcb6..b68f7528 100644 --- a/Modules/TopBar/AudioVisualization.qml +++ b/Modules/TopBar/AudioVisualization.qml @@ -99,8 +99,9 @@ Item { Behavior on height { NumberAnimation { - duration: 80 - easing.type: Easing.OutQuad + duration: Anims.durShort + easing.type: Easing.BezierSpline + easing.bezierCurve: Anims.standardDecel } } diff --git a/Modules/TopBar/Battery.qml b/Modules/TopBar/Battery.qml index ac45e223..128c83fe 100644 --- a/Modules/TopBar/Battery.qml +++ b/Modules/TopBar/Battery.qml @@ -44,14 +44,16 @@ Rectangle { NumberAnimation { to: 0.6 - duration: 1000 - easing.type: Easing.InOutQuad + duration: Anims.durLong + easing.type: Easing.BezierSpline + easing.bezierCurve: Anims.standard } NumberAnimation { to: 1 - duration: 1000 - easing.type: Easing.InOutQuad + duration: Anims.durLong + easing.type: Easing.BezierSpline + easing.bezierCurve: Anims.standard } }