feat: option to animate propery changes

luisbocanegra · Jan 26, 2025 · 7497524 · 7497524
1 parent 604cf2e
commit 7497524
Show file tree

Hide file tree

Showing 4 changed files with 185 additions and 1 deletion.
diff --git a/package/contents/config/main.xml b/package/contents/config/main.xml
@@ -82,5 +82,15 @@
         type="Int">
         <default>250</default>
     </entry>
+    <entry
+        name="animatePropertyChanges"
+        type="Bool">
+        <default>false</default>
+    </entry>
+    <entry
+        name="animationDuration"
+        type="Int">
+        <default>250</default>
+    </entry>
   </group>
 </kcfg>
diff --git a/package/contents/ui/code/globals.js b/package/contents/ui/code/globals.js
@@ -269,5 +269,7 @@ const ignoredConfigs = [
   "enableDBusService",
   "dBusPollingRate",
   "pythonExecutable",
-  "forceForegroundColor"
+  "forceForegroundColor",
+  "animatePropertyChanges",
+  "animationDuration"
 ]
diff --git a/package/contents/ui/configGeneral.qml b/package/contents/ui/configGeneral.qml
@@ -19,6 +19,8 @@ KCM.SimpleKCM {
     property alias cfg_enableDBusService: enableDBusService.checked
     property alias cfg_pythonExecutable: pythonExecutable.text
     property alias cfg_dBusPollingRate: dBusPollingRate.value
+    property alias cfg_animatePropertyChanges: animatePropertyChanges.checked
+    property alias cfg_animationDuration: animationDuration.value
 
     property string presetsDir: StandardPaths.writableLocation(
                     StandardPaths.HomeLocation).toString().substring(7) + "/.config/panel-colorizer/presets"
@@ -52,6 +54,27 @@ KCM.SimpleKCM {
                 text: i18n("Show debugging information")
             }
 
+            Kirigami.Separator {
+                Kirigami.FormData.isSection: true
+                Kirigami.FormData.label: i18n("Property change animations")
+                Layout.fillWidth: true
+            }
+
+            CheckBox {
+                Kirigami.FormData.label: i18n("Enabled:")
+                id: animatePropertyChanges
+                onCheckedChanged: cfg_animatePropertyChanges = checked
+            }
+
+            SpinBox {
+                Kirigami.FormData.label: i18n("Duration:")
+                from: 0
+                to: 9999
+                stepSize: 50
+                id: animationDuration
+                enabled: animatePropertyChanges.checked
+            }
+
             Kirigami.Separator {
                 Kirigami.FormData.isSection: true
                 Kirigami.FormData.label: i18n("D-Bus Service")
@@ -93,6 +116,7 @@ KCM.SimpleKCM {
                 to: 9999
                 stepSize: 100
                 id: dBusPollingRate
+                enabled: enableDBusService.checked
             }
 
             Label {
@@ -113,6 +137,7 @@ KCM.SimpleKCM {
                 readOnly: true
                 wrapMode: Text.WordWrap
                 Layout.preferredWidth: 400
+                enabled: enableDBusService.checked
             }
 
             Label {
@@ -124,6 +149,7 @@ KCM.SimpleKCM {
                 readOnly: true
                 wrapMode: Text.WordWrap
                 Layout.preferredWidth: 400
+                enabled: enableDBusService.checked
             }
 
 
@@ -136,6 +162,7 @@ KCM.SimpleKCM {
                 readOnly: true
                 wrapMode: Text.WordWrap
                 Layout.preferredWidth: 400
+                enabled: enableDBusService.checked
             }
 
             Label {
@@ -147,6 +174,7 @@ KCM.SimpleKCM {
                 readOnly: true
                 wrapMode: Text.WordWrap
                 Layout.preferredWidth: 400
+                enabled: enableDBusService.checked
             }
         }
     }

diff --git a/package/contents/ui/main.qml b/package/contents/ui/main.qml
@@ -1,3 +1,5 @@
+pragma ComponentBehavior: Bound
+
 import QtCore
 import QtQuick
 import QtQuick.Controls
@@ -67,6 +69,9 @@ PlasmoidItem {
     property Item trayWidgetBgItem
     property string lastPreset
     property var presetContent: ""
+    property bool animatePropertyChanges: plasmoid.configuration.animatePropertyChanges
+    property int animationDuration: plasmoid.configuration.animationDuration
+    property int animationEasingType: Easing.OutCubic
     property var panelState: {
         "fullscreenWindow": tasksModel.fullscreenExists,
         "maximized": tasksModel.maximizedExists,
@@ -461,6 +466,35 @@ PlasmoidItem {
             bottomRightRadius: bottomRightRadius
         }
 
+        Behavior on topLeftRadius {
+            enabled: animatePropertyChanges
+            NumberAnimation {
+                duration: main.animationDuration
+                easing.type: main.animationEasingType
+            }
+        }
+        Behavior on topRightRadius {
+            enabled: animatePropertyChanges
+            NumberAnimation {
+                duration: main.animationDuration
+                easing.type: main.animationEasingType
+            }
+        }
+        Behavior on bottomLeftRadius {
+            enabled: animatePropertyChanges
+            NumberAnimation {
+                duration: main.animationDuration
+                easing.type: main.animationEasingType
+            }
+        }
+        Behavior on bottomRightRadius {
+            enabled: animatePropertyChanges
+            NumberAnimation {
+                duration: main.animationDuration
+                easing.type: main.animationEasingType
+            }
+        }
+
         color: {
             if (bgEnabled) {
                 return getColor(bgColorCfg, targetIndex, null, itemType, bgColorHolder)
@@ -469,6 +503,14 @@ PlasmoidItem {
             }
         }
 
+        Behavior on color {
+            enabled: animatePropertyChanges
+            ColorAnimation {
+                duration: main.animationDuration
+                easing.type: main.animationEasingType
+            }
+        }
+
         property int targetChildren: target.children.length
         onTargetChildrenChanged: {
             // console.error("CHILDREN CHANGED", targetChildren, target)
@@ -531,6 +573,20 @@ PlasmoidItem {
 
         height: isTray ? target.height : parent.height
         width: isTray ? target.width : parent.width
+        Behavior on height {
+            enabled: animatePropertyChanges
+            NumberAnimation {
+                duration: main.animationDuration
+                easing.type: main.animationEasingType
+            }
+        }
+        Behavior on width {
+            enabled: animatePropertyChanges
+            NumberAnimation {
+                duration: main.animationDuration
+                easing.type: main.animationEasingType
+            }
+        }
         anchors.centerIn: (isTray || isTrayArrow) ? parent : undefined
         anchors.fill: (isPanel ||isTray || isTrayArrow) ? parent : undefined
 
@@ -551,6 +607,21 @@ PlasmoidItem {
             + extraBSpacing
         property int verticalWidth: marginTop + marginBottom
 
+        Behavior on horizontalWidth {
+            enabled: animatePropertyChanges
+            NumberAnimation {
+                duration: main.animationDuration
+                easing.type: main.animationEasingType
+            }
+        }
+        Behavior on verticalWidth {
+            enabled: animatePropertyChanges
+            NumberAnimation {
+                duration: main.animationDuration
+                easing.type: main.animationEasingType
+            }
+        }
+
         Binding {
             target: rect
             property: "x"
@@ -727,6 +798,14 @@ PlasmoidItem {
                 return getColor(borderColorCfg, targetIndex, rect.color, itemType, borderRec)
             }
 
+            Behavior on borderColor {
+                enabled: animatePropertyChanges
+                ColorAnimation {
+                    duration: main.animationDuration
+                    easing.type: main.animationEasingType
+                }
+            }
+
             Rectangle {
                 id: customBorderTop
                 width: parent.width
@@ -846,6 +925,35 @@ PlasmoidItem {
             }
             xOffset: bgShadow.xOffset
             yOffset: bgShadow.yOffset
+
+            Behavior on size {
+                enabled: animatePropertyChanges
+                NumberAnimation {
+                    duration: main.animationDuration
+                    easing.type: main.animationEasingType
+                }
+            }
+            Behavior on xOffset {
+                enabled: animatePropertyChanges
+                NumberAnimation {
+                    duration: main.animationDuration
+                    easing.type: main.animationEasingType
+                }
+            }
+            Behavior on yOffset {
+                enabled: animatePropertyChanges
+                NumberAnimation {
+                    duration: main.animationDuration
+                    easing.type: main.animationEasingType
+                }
+            }
+            Behavior on color {
+                enabled: animatePropertyChanges
+                ColorAnimation {
+                    duration: main.animationDuration
+                    easing.type: main.animationEasingType
+                }
+            }
         }
 
         // paddingRect to hide the shadow in one or two sides Qt.rect(left,top,right,bottom)
@@ -890,6 +998,34 @@ PlasmoidItem {
             }
             source: target.applet
             visible: fgShadowEnabled
+            Behavior on color {
+                enabled: animatePropertyChanges
+                ColorAnimation {
+                    duration: main.animationDuration
+                    easing.type: main.animationEasingType
+                }
+            }
+            Behavior on radius {
+                enabled: animatePropertyChanges
+                NumberAnimation {
+                    duration: main.animationDuration
+                    easing.type: main.animationEasingType
+                }
+            }
+            Behavior on horizontalOffset {
+                enabled: animatePropertyChanges
+                NumberAnimation {
+                    duration: main.animationDuration
+                    easing.type: main.animationEasingType
+                }
+            }
+            Behavior on verticalOffset {
+                enabled: animatePropertyChanges
+                NumberAnimation {
+                    duration: main.animationDuration
+                    easing.type: main.animationEasingType
+                }
+            }
         }
 
         property real blurMaskX: {
@@ -1195,6 +1331,14 @@ PlasmoidItem {
         Utils.panelOpacity(panelElement, isEnabled, nativePanelBackgroundOpacity)
     }
 
+    Behavior on nativePanelBackgroundOpacity {
+        enabled: animatePropertyChanges
+        NumberAnimation {
+            duration: main.animationDuration
+            easing.type: main.animationEasingType
+        }
+    }
+
     onNativePanelBackgroundEnabledChanged: {
         if(!containmentItem) return
         Utils.toggleTransparency(containmentItem, nativePanelBackgroundEnabled)