dms: Material Animation Refactor

- Thanks Google for Material 3 Expressive stuffs - Thanks Caelestia shell for pushing qml limits to showcase the blueprint
2026-04-14 09:42:10 -04:00 · 2026-02-08 20:24:37 -05:00
parent d775974a90
commit 37cc4ab197
16 changed files with 442 additions and 34 deletions
--- a/quickshell/Widgets/DankRipple.qml
+++ b/quickshell/Widgets/DankRipple.qml
@@ -0,0 +1,91 @@
+import QtQuick
+import qs.Common
+
+// Material Design 3 ripple effect component
+MouseArea {
+    id: root
+
+    property color rippleColor: Theme.primary
+    property real cornerRadius: 0
+    property bool enableRipple: typeof SettingsData !== "undefined" ? (SettingsData.enableRippleEffects ?? true) : true
+
+    property real _rippleX: 0
+    property real _rippleY: 0
+    property real _rippleRadius: 0
+
+    enabled: false
+    hoverEnabled: false
+
+    function trigger(x, y) {
+        if (!enableRipple || Theme.currentAnimationSpeed === SettingsData.AnimationSpeed.None)
+            return;
+
+        _rippleX = x;
+        _rippleY = y;
+
+        const dist = (ox, oy) => ox * ox + oy * oy;
+        _rippleRadius = Math.sqrt(Math.max(dist(x, y), dist(x, height - y), dist(width - x, y), dist(width - x, height - y)));
+
+        rippleAnim.restart();
+    }
+
+    SequentialAnimation {
+        id: rippleAnim
+
+        PropertyAction {
+            target: ripple
+            property: "x"
+            value: root._rippleX
+        }
+        PropertyAction {
+            target: ripple
+            property: "y"
+            value: root._rippleY
+        }
+        PropertyAction {
+            target: ripple
+            property: "opacity"
+            value: 0.08
+        }
+
+        ParallelAnimation {
+            DankAnim {
+                target: ripple
+                property: "implicitWidth"
+                from: 0
+                to: root._rippleRadius * 2
+                duration: Theme.expressiveDurations.expressiveEffects
+                easing.bezierCurve: Theme.expressiveCurves.standardDecel
+            }
+            DankAnim {
+                target: ripple
+                property: "implicitHeight"
+                from: 0
+                to: root._rippleRadius * 2
+                duration: Theme.expressiveDurations.expressiveEffects
+                easing.bezierCurve: Theme.expressiveCurves.standardDecel
+            }
+        }
+
+        DankAnim {
+            target: ripple
+            property: "opacity"
+            to: 0
+            duration: Theme.expressiveDurations.expressiveEffects
+            easing.bezierCurve: Theme.expressiveCurves.standard
+        }
+    }
+
+    Rectangle {
+        id: ripple
+
+        radius: Math.min(width, height) / 2
+        color: root.rippleColor
+        opacity: 0
+
+        transform: Translate {
+            x: -ripple.width / 2
+            y: -ripple.height / 2
+        }
+    }
+}