Salastil/DankMaterialShell
1
0
Fork 0
mirror of https://github.com/AvengeMedia/DankMaterialShell.git synced 2026-04-14 01:32:29 -04:00
Code Packages Releases Activity

animations/ripple: clean up effect and apply more universally

Browse Source
This commit is contained in:
bbedward
2026-02-10 12:48:12 -05:00
parent 5a0bb260b4
commit 3d0ee9d72b
49 changed files with 980 additions and 805 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
quickshell/Widgets/DankRipple.qml
View File

@@ -1,8 +1,8 @@
import QtQuick
import QtQuick.Effects
import qs.Common
// Material Design 3 ripple effect component
MouseArea {
Item {
id: root
property color rippleColor: Theme.primary
@@ -11,10 +11,10 @@ MouseArea {
property real _rippleX: 0
property real _rippleY: 0
property real _rippleRadius: 0
property real _rippleSize: 0
readonly property alias animating: rippleAnim.running
enabled: false
hoverEnabled: false
anchors.fill: parent
function trigger(x, y) {
if (!enableRipple || Theme.currentAnimationSpeed === SettingsData.AnimationSpeed.None)
@@ -24,7 +24,7 @@ MouseArea {
_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)));
_rippleSize = Math.sqrt(Math.max(dist(x, y), dist(x, height - y), dist(width - x, y), dist(width - x, height - y))) * 2;
rippleAnim.restart();
}
@@ -42,10 +42,20 @@ MouseArea {
property: "y"
value: root._rippleY
}
PropertyAction {
target: ripple
property: "implicitWidth"
value: 0
}
PropertyAction {
target: ripple
property: "implicitHeight"
value: 0
}
PropertyAction {
target: ripple
property: "opacity"
value: 0.08
value: 0.10
}
ParallelAnimation {
@@ -53,39 +63,74 @@ MouseArea {
target: ripple
property: "implicitWidth"
from: 0
to: root._rippleRadius * 2
duration: Theme.expressiveDurations.expressiveEffects
to: root._rippleSize
duration: Theme.expressiveDurations.expressiveDefaultSpatial
easing.bezierCurve: Theme.expressiveCurves.standardDecel
}
DankAnim {
target: ripple
property: "implicitHeight"
from: 0
to: root._rippleRadius * 2
duration: Theme.expressiveDurations.expressiveEffects
to: root._rippleSize
duration: Theme.expressiveDurations.expressiveDefaultSpatial
easing.bezierCurve: Theme.expressiveCurves.standardDecel
}
}
DankAnim {
target: ripple
property: "opacity"
to: 0
duration: Theme.expressiveDurations.expressiveEffects
easing.bezierCurve: Theme.expressiveCurves.standard
SequentialAnimation {
PauseAnimation {
duration: Math.round(Theme.expressiveDurations.expressiveDefaultSpatial * 0.6)
}
DankAnim {
target: ripple
property: "opacity"
to: 0
duration: Theme.expressiveDurations.expressiveDefaultSpatial
easing.bezierCurve: Theme.expressiveCurves.standard
}
}
}
}
Rectangle {
id: ripple
Item {
id: rippleContainer
anchors.fill: parent
visible: root.cornerRadius <= 0
radius: Math.min(width, height) / 2
color: root.rippleColor
opacity: 0
Rectangle {
id: ripple
transform: Translate {
x: -ripple.width / 2
y: -ripple.height / 2
radius: Math.min(width, height) / 2
color: root.rippleColor
opacity: 0
transform: Translate {
x: -ripple.width / 2
y: -ripple.height / 2
}
}
}
Item {
id: rippleMask
anchors.fill: parent
layer.enabled: root.cornerRadius > 0
layer.smooth: true
visible: false
Rectangle {
anchors.fill: parent
radius: root.cornerRadius
color: "black"
antialiasing: true
}
}
MultiEffect {
anchors.fill: parent
source: rippleContainer
maskEnabled: true
maskSource: rippleMask
maskThresholdMin: 0.5
maskSpreadAtMin: 1.0
visible: root.cornerRadius > 0 && rippleAnim.running
}
}