nosignal/nosignal-shell
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

internal: better ripple anim

Browse source 
Fade after expansion, also correctly calculate ripple size
Also fix ripples triggering on disabled buttons
This commit is contained in:
2 * r + 2 * t 2025-07-09 00:03:55 +10:00
parent 8a6679eace
commit fc31b43ee6
2 changed files with 37 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
modules/dashboard/Tabs.qml
View file

@ -119,8 +119,7 @@ Item {
rippleAnim.y = event.y - stateY; rippleAnim.y = event.y - stateY;
const dist = (ox, oy) => ox * ox + oy * oy; const dist = (ox, oy) => ox * ox + oy * oy;
const stateEndY = stateY + stateWrapper.height; rippleAnim.radius = Math.sqrt(Math.max(dist(event.x, event.y + stateY), dist(event.x, stateWrapper.height - event.y), dist(width - event.x, event.y + stateY), dist(width - event.x, stateWrapper.height - event.y)));
rippleAnim.radius = Math.sqrt(Math.max(dist(0, stateY), dist(0, stateEndY), dist(width, stateY), dist(width, stateEndY)));
rippleAnim.restart(); rippleAnim.restart();
} }
@ -151,25 +150,23 @@ Item {
PropertyAction { PropertyAction {
target: ripple target: ripple
property: "opacity" property: "opacity"
value: 0.1 value: 0.08
} }
ParallelAnimation {
Anim { Anim {
target: ripple target: ripple
properties: "implicitWidth,implicitHeight" properties: "implicitWidth,implicitHeight"
from: 0 from: 0
to: rippleAnim.radius * 2 to: rippleAnim.radius * 2
duration: Appearance.anim.durations.large duration: Appearance.anim.durations.normal
easing.bezierCurve: Appearance.anim.curves.standardDecel easing.bezierCurve: Appearance.anim.curves.standardDecel
} }
Anim { Anim {
target: ripple target: ripple
property: "opacity" property: "opacity"
to: 0 to: 0
duration: Appearance.anim.durations.large duration: Appearance.anim.durations.normal
easing.type: Easing.BezierSpline easing.type: Easing.BezierSpline
easing.bezierCurve: Appearance.anim.curves.standardDecel easing.bezierCurve: Appearance.anim.curves.standard
}
} }
} }

13
widgets/StateLayer.qml
View file

@ -19,11 +19,14 @@ MouseArea {
hoverEnabled: true hoverEnabled: true
onPressed: event => { onPressed: event => {
if (disabled)
return;
rippleAnim.x = event.x; rippleAnim.x = event.x;
rippleAnim.y = event.y; rippleAnim.y = event.y;
const dist = (ox, oy) => ox * ox + oy * oy; const dist = (ox, oy) => ox * ox + oy * oy;
rippleAnim.radius = Math.sqrt(Math.max(dist(0, 0), dist(0, width), dist(width, 0), dist(width, height))); rippleAnim.radius = Math.sqrt(Math.max(dist(event.x, event.y), dist(event.x, height - event.y), dist(width - event.x, event.y), dist(width - event.x, height - event.y)));
rippleAnim.restart(); rippleAnim.restart();
} }
@ -50,27 +53,25 @@ MouseArea {
PropertyAction { PropertyAction {
target: ripple target: ripple
property: "opacity" property: "opacity"
value: 0.1 value: 0.08
} }
ParallelAnimation {
Anim { Anim {
target: ripple target: ripple
properties: "implicitWidth,implicitHeight" properties: "implicitWidth,implicitHeight"
from: 0 from: 0
to: rippleAnim.radius * 2 to: rippleAnim.radius * 2
duration: Appearance.anim.durations.large duration: Appearance.anim.durations.normal
easing.bezierCurve: Appearance.anim.curves.standardDecel easing.bezierCurve: Appearance.anim.curves.standardDecel
} }
Anim { Anim {
target: ripple target: ripple
property: "opacity" property: "opacity"
to: 0 to: 0
duration: Appearance.anim.durations.large duration: Appearance.anim.durations.normal
easing.type: Easing.BezierSpline easing.type: Easing.BezierSpline
easing.bezierCurve: Appearance.anim.curves.standard easing.bezierCurve: Appearance.anim.curves.standard
} }
} }
}
StyledClippingRect { StyledClippingRect {
id: hoverLayer id: hoverLayer