make ripples more subtle (circle -> radial gradient)

This commit is contained in:
end-4 2025-06-06 21:25:56 +02:00
parent 31e782a36f
commit a2f2fb816b
2 changed files with 36 additions and 9 deletions

View file

@ -110,13 +110,28 @@ TabButton {
animation: Appearance?.animation.elementMoveFast.colorAnimation.createObject(this)
}
Rectangle {
Item {
id: ripple
radius: Appearance?.rounding.full ?? 9999
color: button.colRipple
width: ripple.implicitWidth
height: ripple.implicitHeight
opacity: 0
property real implicitWidth: 0
property real implicitHeight: 0
Behavior on opacity {
animation: Appearance?.animation.elementMoveFast.colorAnimation.createObject(this)
}
RadialGradient {
anchors.fill: parent
gradient: Gradient {
GradientStop { position: 0.0; color: button.colRipple }
GradientStop { position: 0.3; color: button.colRipple }
GradientStop { position: 0.5 ; color: Qt.rgba(button.colRipple.r, button.colRipple.g, button.colRipple.b, 0) }
}
}
transform: Translate {
x: -ripple.width / 2
y: -ripple.height / 2

View file

@ -150,16 +150,28 @@ Button {
}
}
Rectangle {
Item {
id: ripple
radius: Appearance?.rounding.full ?? 9999
width: ripple.implicitWidth
height: ripple.implicitHeight
opacity: 0
color: root.rippleColor
Behavior on color {
property real implicitWidth: 0
property real implicitHeight: 0
Behavior on opacity {
animation: Appearance?.animation.elementMoveFast.colorAnimation.createObject(this)
}
RadialGradient {
anchors.fill: parent
gradient: Gradient {
GradientStop { position: 0.0; color: root.rippleColor }
GradientStop { position: 0.3; color: root.rippleColor }
GradientStop { position: 0.5; color: Qt.rgba(root.rippleColor.r, root.rippleColor.g, root.rippleColor.b, 0) }
}
}
transform: Translate {
x: -ripple.width / 2
y: -ripple.height / 2