Salastil/DankMaterialShell
1
0
Fork 0
mirror of https://github.com/AvengeMedia/DankMaterialShell.git synced 2026-08-02 03:28:28 -04:00
Code Packages Releases Activity

animations: add DankColorAnimation helper to properly animate between

Browse Source 
colors with different alpha values
fixes #2720
This commit is contained in:
bbedward
2026-07-03 15:36:45 -04:00
parent 3253adb6dd
commit 930a36bcfc
7 changed files with 95 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
quickshell/Modals/DankLauncherV2/SpotlightLauncherContent.qml
+6 -7
View File
@@ -1,7 +1,6 @@
pragma ComponentBehavior: Bound
import QtQuick
import Quickshell
import qs.Common
import qs.Services
import qs.Widgets
@@ -319,13 +318,13 @@ FocusScope {
Rectangle {
anchors.fill: parent
radius: height / 2
color: categoryChip.isSelected ? Theme.primary : chipArea.containsMouse ? Theme.surfaceHover : Theme.surfaceVariantAlpha
color: chipColor.value
Behavior on color {
ColorAnimation {
duration: root._fastDuration
easing.type: Theme.standardEasing
}
DankColorAnimation {
id: chipColor
to: categoryChip.isSelected ? Theme.primary : chipArea.containsMouse ? Theme.surfaceHover : Theme.surfaceVariantAlpha
duration: root._fastDuration
easingType: Theme.standardEasing
}
StyledText {
quickshell/Modals/Greeter/GreeterModal.qml
+7 -7
View File
@@ -191,21 +191,21 @@ FloatingWindow {
width: isActive ? dotSize * 3 : dotSize
height: dotSize
radius: dotSize / 2
color: isActive ? Theme.primary : Theme.surfaceTextAlpha
color: dotColor.value
anchors.verticalCenter: parent.verticalCenter
DankColorAnimation {
id: dotColor
to: isActive ? Theme.primary : Theme.surfaceTextAlpha
duration: Theme.shortDuration
}
Behavior on width {
NumberAnimation {
duration: Theme.shortDuration
easing.type: Theme.emphasizedEasing
}
}
Behavior on color {
ColorAnimation {
duration: Theme.shortDuration
}
}
}
}
}
quickshell/Modules/DankBar/Widgets/WorkspaceSwitcher.qml
+7 -10
View File
@@ -1283,10 +1283,15 @@ Item {
readonly property color requestedColor: isActive ? activeColor : isUrgent ? urgentColor : isPlaceholder ? Theme.surfaceTextLight : isHovered ? Theme.withAlpha(unfocusedColor, 0.7) : isOccupied ? occupiedColor : unfocusedColor
property color displayColor: requestedColor
property bool colorAnimationReady: false
onRequestedColorChanged: Qt.callLater(() => delegateRoot.displayColor = delegateRoot.requestedColor)
readonly property color displayColor: pillColor.value
DankColorAnimation {
id: pillColor
to: delegateRoot.requestedColor
animated: delegateRoot.colorAnimationReady
}
Item {
id: dragHandler
@@ -1560,14 +1565,6 @@ Item {
}
}
Behavior on color {
enabled: delegateRoot.colorAnimationReady
ColorAnimation {
duration: Theme.mediumDuration
easing.type: Theme.emphasizedEasing
}
}
Behavior on border.width {
NumberAnimation {
duration: Theme.mediumDuration
quickshell/Modules/Settings/DankDashTab.qml
+7 -11
View File
@@ -424,26 +424,22 @@ Item {
id: surface
anchors.fill: parent
radius: rowItem.dragging ? Theme.cornerRadius + 6 : Theme.cornerRadius
color: {
if (rowItem.dragging)
return Theme.secondaryContainer;
const base = Theme.surfaceContainer;
return Theme.withAlpha(base, rowItem.isEnabled ? 0.7 : 0.4);
}
color: surfaceColor.value
border.width: rowItem.dragging ? 2 : 1
border.color: rowItem.dragging ? Theme.primary : Theme.outlineHeavy
DankColorAnimation {
id: surfaceColor
to: rowItem.dragging ? Theme.secondaryContainer : Theme.withAlpha(Theme.surfaceContainer, rowItem.isEnabled ? 0.7 : 0.4)
duration: Theme.shortDuration
}
Behavior on radius {
NumberAnimation {
duration: Theme.shortDuration
easing.type: Easing.OutCubic
}
}
Behavior on color {
ColorAnimation {
duration: Theme.shortDuration
}
}
Behavior on border.color {
ColorAnimation {
duration: Theme.shortDuration
quickshell/Modules/Settings/WidgetsTabSection.qml
+5 -5
View File
@@ -279,7 +279,7 @@ Column {
scale: delegateItem.dragging ? 1.02 : 1.0
transformOrigin: Item.Center
radius: delegateItem.dragging ? Theme.cornerRadius + 6 : Theme.cornerRadius
color: delegateItem.dragging ? Theme.secondaryContainer : Theme.withAlpha(Theme.surfaceContainer, modelData.enabled ? 0.7 : 0.4)
color: itemColor.value
border.color: delegateItem.dragging ? Theme.primary : Theme.outlineHeavy
border.width: delegateItem.dragging ? 2 : 1
@@ -295,10 +295,10 @@ Column {
easing.type: Easing.OutCubic
}
}
Behavior on color {
ColorAnimation {
duration: Theme.shortDuration
}
DankColorAnimation {
id: itemColor
to: delegateItem.dragging ? Theme.secondaryContainer : Theme.withAlpha(Theme.surfaceContainer, modelData.enabled ? 0.7 : 0.4)
duration: Theme.shortDuration
}
Behavior on border.color {
ColorAnimation {
quickshell/Widgets/DankButton.qml
+1 -1
View File
@@ -44,7 +44,7 @@ Rectangle {
return Theme.withAlpha(root.textColor, 0.20);
if (hovered)
return Theme.withAlpha(root.textColor, 0.12);
return "transparent";
return Theme.withAlpha(root.textColor, 0);
}
Behavior on color {
quickshell/Widgets/DankColorAnimation.qml
+62
View File
@@ -0,0 +1,62 @@
import QtQuick
import qs.Common
// Premultiplied-alpha color tween: bind `to`, read `value`. Plain
// ColorAnimation lerps raw RGBA and flashes when the endpoints differ
// in both color and alpha (translucent <-> opaque).
QtObject {
id: root
property color to
property bool animated: true
property int duration: Theme.mediumDuration
property int easingType: Theme.emphasizedEasing
property color _from: to
property color _target: to
property real _mix: 1
property bool _ready: false
readonly property color value: {
const from = _from;
const target = _target;
const alpha = from.a + (target.a - from.a) * _mix;
if (alpha <= 0)
return Qt.rgba(target.r, target.g, target.b, 0);
const mix = (a, b) => (a * from.a + (b * target.a - a * from.a) * _mix) / alpha;
return Qt.rgba(mix(from.r, target.r), mix(from.g, target.g), mix(from.b, target.b), alpha);
}
readonly property NumberAnimation _anim: NumberAnimation {
target: root
property: "_mix"
from: 0
to: 1
duration: root.duration
easing.type: root.easingType
}
onToChanged: {
if (!_ready || !animated) {
_anim.stop();
_from = to;
_target = to;
_mix = 1;
return;
}
if (Qt.colorEqual(to, _target))
return;
const current = value;
_anim.stop();
_from = current;
_target = to;
_mix = 0;
_anim.restart();
}
Component.onCompleted: {
_from = to;
_target = to;
_ready = true;
}
}