Switch animations

qt6/src/qml/ButtonBox.qml

@@ -1,4 +1,4 @@
-// SPDX-FileCopyrightText: 2021 - 2022 UnionTech Software Technology Co., Ltd.
+// SPDX-FileCopyrightText: 2021 - 2024 UnionTech Software Technology Co., Ltd.
 //
 // SPDX-License-Identifier: LGPL-3.0-or-later
 
@@ -25,27 +25,51 @@ Control {
         children: control.buttons
     }
 
+    Loader {
+        active: D.DTK.hasAnimation
+        sourceComponent: P.ButtonPanel {
+            id: backgroundPanel
+            visible: btnGroup.checkedButton
+            implicitWidth: visible ? btnGroup.checkedButton.width : 0
+            implicitHeight: visible ? btnGroup.checkedButton.height : 0
+            button: control
+            outsideBorderColor: null
+            color1: D.Palette {
+                normal {
+                    common: Qt.rgba(0, 0, 0, 0.2)
+                }
+            }
+            color2: color1
 
-    ParallelAnimation {
-        running:  btnGroup.checkedButton && (btnGroup.checkedButton.x !== backgroundPanel.x || btnGroup.checkedButton.y !== backgroundPanel.y)
-        NumberAnimation { target: backgroundPanel; property: "x"; to: btnGroup.checkedButton ? btnGroup.checkedButton.x : backgroundPanel.x; duration: 200 }
-        NumberAnimation { target: backgroundPanel; property: "y"; to: btnGroup.checkedButton ? btnGroup.checkedButton.y : backgroundPanel.y; duration: 200 }
-        NumberAnimation { target: backgroundPanel; property: "width"; to: btnGroup.checkedButton ? btnGroup.checkedButton.width : backgroundPanel.width; duration: 200 }
-        NumberAnimation { target: backgroundPanel; property: "height"; to: btnGroup.checkedButton ? btnGroup.checkedButton.height : backgroundPanel.height; duration: 200 }
-    }
-
-    P.ButtonPanel {
-        id: backgroundPanel
-        visible: btnGroup.checkedButton
-        implicitWidth: visible ? btnGroup.checkedButton.width : 0
-        implicitHeight: visible ? btnGroup.checkedButton.height : 0
-        button: control
-        outsideBorderColor: null
-        color1: D.Palette {
-            normal {
-                common: Qt.rgba(0, 0, 0, 0.2)
+            ParallelAnimation {
+                running: btnGroup.checkedButton
+                         && (btnGroup.checkedButton.x !== backgroundPanel.x
+                             || btnGroup.checkedButton.y !== backgroundPanel.y)
+                NumberAnimation {
+                    target: backgroundPanel
+                    property: "x"
+                    to: btnGroup.checkedButton ? btnGroup.checkedButton.x : backgroundPanel.x
+                    duration: 200
+                }
+                NumberAnimation {
+                    target: backgroundPanel
+                    property: "y"
+                    to: btnGroup.checkedButton ? btnGroup.checkedButton.y : backgroundPanel.y
+                    duration: 200
+                }
+                NumberAnimation {
+                    target: backgroundPanel
+                    property: "width"
+                    to: btnGroup.checkedButton ? btnGroup.checkedButton.width : backgroundPanel.width
+                    duration: 200
+                }
+                NumberAnimation {
+                    target: backgroundPanel
+                    property: "height"
+                    to: btnGroup.checkedButton ? btnGroup.checkedButton.height : backgroundPanel.height
+                    duration: 200
+                }
             }
         }
-        color2: color1
     }
 }

qt6/src/qml/ItemDelegate.qml

@@ -13,6 +13,7 @@ T.ItemDelegate {
     id: control
     property bool indicatorVisible
     property bool backgroundVisible: true
+    property bool normalBackgroundVisible: true
     property bool cascadeSelected
     property bool contentFlow
     property Component content
@@ -42,7 +43,10 @@ T.ItemDelegate {
     spacing: DS.Style.control.spacing
     checkable: true
     autoExclusive: true
-    palette.windowText: checked && !control.cascadeSelected && control.backgroundVisible && !dragActive? D.ColorSelector.checkedTextColor : undefined
+    palette.windowText: {
+        let undraged = D.DTK.hasAnimation ? control.backgroundVisible && !dragActive : true
+        return checked && !control.cascadeSelected && undraged ? D.ColorSelector.checkedTextColor : undefined
+    }
 
     D.DciIcon.mode: D.ColorSelector.controlState
     D.DciIcon.theme: D.ColorSelector.controlTheme
@@ -112,7 +116,7 @@ T.ItemDelegate {
 
         Loader {
             anchors.fill: parent
-            active: !control.ListView.view && !checked && control.backgroundVisible
+            active: !checked && control.normalBackgroundVisible
             sourceComponent: D.RoundRectangle {
                 color: DS.Style.itemDelegate.normalColor
                 radius: DS.Style.control.radius
@@ -154,15 +158,15 @@ T.ItemDelegate {
     }
 
     onHoveredChanged: {
-        if (checked || control.cascadeSelected || !backgroundVisible || dragActive)
+        if (checked || control.cascadeSelected || !backgroundVisible || dragActive || !D.DTK.hasAnimation)
             return
 
         if (ListView.view)
             ListView.view.setHoverItem(control.hovered ? control : null)
     }
 
     onCheckedChanged: {
-        if (ListView.view)
+        if (ListView.view && D.DTK.hasAnimation)
             ListView.view.updateCheckedItems()
     }
 }

qt6/src/qml/ListView.qml

@@ -47,7 +47,7 @@ ListView {
     DragItemsImage {
         id: dragItem
         items: checkedItems
-        visible: Drag.active
+        visible: Drag.active && D.DTK.hasAnimation
         // Drag.mimeData: {"text/plain": ""}
 
         onAboutToGrabToImage: function(item) {
@@ -157,7 +157,7 @@ ListView {
 
         Loader {
             anchors.fill: parent
-            active: hoveredItem
+            active: hoveredItem && D.DTK.hasAnimation
             sourceComponent: P.ButtonPanel {
                 button: hoveredItem
                 enableAnimation: false // avoid hover animation

qt6/src/qml/Switch.qml

@@ -20,48 +20,91 @@ T.Switch {
     topPadding: DS.Style.control.vPadding
     bottomPadding: DS.Style.control.vPadding
     spacing: DS.Style.control.spacing
-    D.ColorSelector.hovered: false // disable hover ==> normal animation
-
-    indicator: D.DciIcon {
-        id: handle
-        implicitWidth: DS.Style.switchButton.indicatorWidth
-        implicitHeight: DS.Style.switchButton.indicatorHeight
-
-        x: text ? (control.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding + (control.availableWidth - width) / 2
-        y: control.topPadding + (control.availableHeight - height) / 2
-
-        width: DS.Style.switchButton.handleWidth
-        height: DS.Style.switchButton.handleHeight
-        sourceSize: Qt.size(DS.Style.switchButton.indicatorWidth, DS.Style.switchButton.indicatorWidth)
-        name: !control.checked ? "switch_on" : "switch_off"
-        opacity: control.D.ColorSelector.controlState === D.DTK.DisabledState && control.checked ? 0.4 : 1
-        palette: DTK.makeIconPalette(control.palette)
-        mode: control.D.ColorSelector.controlState
-        theme: control.D.ColorSelector.controlTheme
-        fallbackToQIcon: false
-    }
+    D.ColorSelector.hovered: !D.DTK.hasAnimation // disable hover ==> normal animation
+
+    indicator: Loader {
+        sourceComponent: D.DTK.hasAnimation ? animationIndicatorComp : staticIndicatorComp
+        Component {
+            id: staticIndicatorComp
+            Rectangle {
+                implicitWidth: DS.Style.switchButton.indicatorWidth
+                implicitHeight: DS.Style.switchButton.indicatorHeight
+
+                x: text ? (control.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding + (control.availableWidth - width) / 2
+                y: control.topPadding + (control.availableHeight - height) / 2
+                radius: DS.Style.control.radius
+                color: control.D.ColorSelector.backgroundColor
+                opacity: control.D.ColorSelector.controlState === D.DTK.DisabledState ? 0.4 : 1
 
-    Timer {
-        id: toggletimer
-        interval: 500
-        onTriggered: {
-            control.toggle()
+                D.DciIcon {
+                    x: Math.max(0, Math.min(parent.width - width, control.visualPosition * parent.width - (width / 2)))
+                    y: (parent.height - height) / 2
+                    width: DS.Style.switchButton.handleWidth
+                    height: DS.Style.switchButton.handleHeight
+                    sourceSize: Qt.size(DS.Style.switchButton.handleWidth, DS.Style.switchButton.handleHeight)
+                    name: DS.Style.switchButton.iconName
+                    opacity: control.D.ColorSelector.controlState === D.DTK.DisabledState && control.checked ? 0.4 : 1
+                    palette {
+                        highlight: control.checked ? control.palette.highlight : control.D.ColorSelector.handleColor
+                        highlightForeground: control.palette.highlightedText
+                        foreground: control.palette.windowText
+                        background: control.palette.window
+                    }
+                    mode: control.D.ColorSelector.controlState
+                    theme: control.D.ColorSelector.controlTheme
+                    fallbackToQIcon: false
+
+                    Behavior on x {
+                        enabled: !control.down
+                        SmoothedAnimation { velocity: 200 }
+                    }
+                }
+            }
         }
-    }
 
-    function palyAndSetImage() {
-        handle.play(D.DTK.NormalState)
-        toggletimer.start();
-    }
+        Component {
+            id: animationIndicatorComp
+            D.DciIcon {
+                id: switchIcon
+                implicitWidth: DS.Style.switchButton.indicatorWidth
+                implicitHeight: DS.Style.switchButton.indicatorHeight
 
-    Keys.onSpacePressed: palyAndSetImage()
-    Keys.onEnterPressed: palyAndSetImage()
-    Keys.onReturnPressed: palyAndSetImage()
+                x: text ? (control.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding + (control.availableWidth - width) / 2
+                y: control.topPadding + (control.availableHeight - height) / 2
 
-    MouseArea {
-        anchors.fill: parent
-        acceptedButtons: Qt.LeftButton
-        onClicked: palyAndSetImage()
+                sourceSize: Qt.size(DS.Style.switchButton.indicatorWidth, DS.Style.switchButton.indicatorWidth)
+                opacity: control.D.ColorSelector.controlState === D.DTK.DisabledState && control.checked ? 0.4 : 1
+                palette: DTK.makeIconPalette(control.palette)
+                mode: control.D.ColorSelector.controlState
+                theme: control.D.ColorSelector.controlTheme
+                fallbackToQIcon: false
+                Component.onCompleted: switchIcon.updateName()
+
+                function updateName() {
+                    name = !control.checked ? "switch_on" : "switch_off"
+                }
+
+                function palyAndSetImage() {
+                    switchIcon.play(D.DTK.NormalState)
+                    toggletimer.start();
+                }
+
+                Timer {
+                    id: toggletimer
+                    interval: 500
+                    onTriggered: {
+                        switchIcon.updateName()
+                    }
+                }
+
+                Connections {
+                    target: control
+                    function onCheckedChanged() {
+                        palyAndSetImage()
+                    }
+                }
+            }
+        }
     }
 
     contentItem: Label {

qt6/src/qml/ToolButton.qml

@@ -1,4 +1,4 @@
-// SPDX-FileCopyrightText: 2021 - 2022 UnionTech Software Technology Co., Ltd.
+// SPDX-FileCopyrightText: 2021 - 2024 UnionTech Software Technology Co., Ltd.
 //
 // SPDX-License-Identifier: LGPL-3.0-or-later
 
@@ -10,7 +10,12 @@ import org.deepin.dtk.private 1.0 as P
 
 T.ToolButton {
     id: control
-    property D.Palette textColor: checked ? DS.Style.highlightedButton.text : (highlighted ? DS.Style.highlightedButton.text : DS.Style.button.text)
+    property D.Palette textColor: {
+        if (D.DTK.hasAnimation)
+            return checked ? DS.Style.highlightedButton.text : (highlighted ? DS.Style.highlightedButton.text : DS.Style.button.text)
+
+        return checked ? DS.Style.checkedButton.text : (highlighted ? DS.Style.highlightedButton.text : DS.Style.button.text)
+    }
 
     implicitWidth: DS.Style.control.implicitWidth(control)
     implicitHeight: DS.Style.control.implicitHeight(control)
@@ -67,9 +72,18 @@ T.ToolButton {
     }
 
     states: [
+        State {
+            name: "normal"
+            when: !control.hovered && !control.checked && D.DTK.hasAnimation
+            PropertyChanges {
+                target: background
+                scale : 0.9
+            }
+
+        },
         State {
             name: "hovered"
-            when: control.hovered && !control.checked
+            when: control.hovered && !control.checked && D.DTK.hasAnimation
             PropertyChanges {
                 target: contentItem
                 scale : 1.1
@@ -82,7 +96,7 @@ T.ToolButton {
         },
         State {
             name: "checked"
-            when: control.checked
+            when: control.checked && D.DTK.hasAnimation
             PropertyChanges {
                 target: contentItem
                 scale : 1.0
@@ -95,17 +109,27 @@ T.ToolButton {
     }
 
     background: P.ButtonPanel {
-        visible: control.state === "hovered"
-        scale : 0.9
+        id: buttonPanel
         implicitWidth: DS.Style.toolButton.width
         implicitHeight: DS.Style.toolButton.height
         button: control
         outsideBorderColor: null
-        color1: D.Palette {
-            normal {
-                common: Qt.rgba(0, 0, 0, 0.1)
+
+        Binding on color1 {
+            when: D.DTK.hasAnimation
+            value: D.Palette {
+                normal {
+                    common: Qt.rgba(0, 0, 0, 0.1)
+                }
             }
         }
-        color2 : color1
+        Binding on color2 {
+            when: D.DTK.hasAnimation
+            value: buttonPanel.color1
+        }
+        Binding on visible {
+            when: D.DTK.hasAnimation
+            value: control.hovered && !control.checked
+        }
     }
 }

src/private/dqmlglobalobject.cpp

@@ -216,6 +216,11 @@ bool DQMLGlobalObject::hasNoTitlebar() const
     return DWindowManagerHelper::instance()->hasNoTitlebar();
 }
 
+bool DQMLGlobalObject::hasAnimation()
+{
+    return !qEnvironmentVariableIsSet("D_DTK_DISABLE_ANIMATIONS");
+}
+
 bool DQMLGlobalObject::isSoftwareRender()
 {
     static bool isSoftware = QQuickWindow::sceneGraphBackend() == QLatin1String("software");

src/private/dqmlglobalobject_p.h

@@ -121,6 +121,7 @@ class DQMLGlobalObject : public QObject, public DTK_CORE_NAMESPACE::DObject
     Q_PROPERTY(bool hasBlurWindow READ hasBlurWindow NOTIFY hasBlurWindowChanged)
     Q_PROPERTY(bool hasComposite READ hasComposite NOTIFY hasCompositeChanged)
     Q_PROPERTY(bool hasNoTitlebar READ hasNoTitlebar NOTIFY hasNoTitlebarChanged)
+    Q_PROPERTY(bool hasAnimation READ hasAnimation NOTIFY hasAnimationChanged)
     Q_PROPERTY(bool isSoftwareRender READ isSoftwareRender FINAL CONSTANT)
     Q_PROPERTY(DTK_GUI_NAMESPACE::DWindowManagerHelper::WMName windowManagerName READ windowManagerName CONSTANT)
     Q_PROPERTY(DTK_GUI_NAMESPACE::DGuiApplicationHelper::ColorType themeType READ themeType NOTIFY themeTypeChanged)
@@ -192,6 +193,7 @@ class DQMLGlobalObject : public QObject, public DTK_CORE_NAMESPACE::DObject
     bool hasBlurWindow() const;
     bool hasComposite() const;
     bool hasNoTitlebar() const;
+    static bool hasAnimation();
     static bool isSoftwareRender();
 
     DWindowManagerHelper::WMName windowManagerName() const;
@@ -254,14 +256,17 @@ class DQMLGlobalObject : public QObject, public DTK_CORE_NAMESPACE::DObject
     static QSGNode* &QSGNode_parent(QSGNode *node);
 #endif
 
+
 Q_SIGNALS:
     void hasBlurWindowChanged();
     void hasCompositeChanged();
     void hasNoTitlebarChanged();
+    void hasAnimationChanged();
     void paletteChanged();
     void inactivePaletteChanged();
     void themeTypeChanged(DTK_GUI_NAMESPACE::DGuiApplicationHelper::ColorType themeType);
 
+
 private:
     D_DECLARE_PRIVATE(DQMLGlobalObject)
     D_PRIVATE_SLOT(void _q_onPaletteChanged())