diff --git a/example/qml/App.qml b/example/qml/App.qml index 6b710ff7..eefb1a74 100644 --- a/example/qml/App.qml +++ b/example/qml/App.qml @@ -10,6 +10,7 @@ Window { Component.onCompleted: { FluApp.init(app) FluTheme.darkMode = FluDarkMode.System + FluTheme.enableAnimation = true FluApp.routes = { "/":"qrc:/example/qml/window/MainWindow.qml", "/about":"qrc:/example/qml/window/AboutWindow.qml", diff --git a/example/qml/page/T_Theme.qml b/example/qml/page/T_Theme.qml index 93c3e273..0a9fe653 100644 --- a/example/qml/page/T_Theme.qml +++ b/example/qml/page/T_Theme.qml @@ -12,7 +12,7 @@ FluScrollablePage{ FluArea{ Layout.fillWidth: true Layout.topMargin: 20 - height: 210 + height: 270 paddings: 10 ColumnLayout{ spacing:0 @@ -72,6 +72,17 @@ FluScrollablePage{ FluTheme.nativeText = !FluTheme.nativeText } } + FluText{ + text:"开启动画效果" + Layout.topMargin: 20 + } + FluToggleSwitch{ + Layout.topMargin: 5 + checked: FluTheme.enableAnimation + onClicked: { + FluTheme.enableAnimation = !FluTheme.enableAnimation + } + } } } CodeExpander{ diff --git a/example/qml/window/MainWindow.qml b/example/qml/window/MainWindow.qml index 3c513948..5e32c3d4 100644 --- a/example/qml/window/MainWindow.qml +++ b/example/qml/window/MainWindow.qml @@ -220,7 +220,7 @@ CustomWindow { } function handleDarkChanged(button){ - if(FluTools.isMacos()){ + if(FluTools.isMacos() || !FluTheme.enableAnimation){ changeDark() }else{ var target = window.contentItem diff --git a/src/FluTheme.cpp b/src/FluTheme.cpp index 7ab80d2c..12448757 100644 --- a/src/FluTheme.cpp +++ b/src/FluTheme.cpp @@ -31,6 +31,7 @@ FluTheme::FluTheme(QObject *parent) }); primaryColor(FluColors::getInstance()->Blue()); nativeText(false); + enableAnimation(false); darkMode(Fluent_DarkMode::Fluent_DarkModeType::Light); _systemDark = systemDark(); qApp->installEventFilter(this); diff --git a/src/FluTheme.h b/src/FluTheme.h index 18bfddc2..ad0b4116 100644 --- a/src/FluTheme.h +++ b/src/FluTheme.h @@ -32,6 +32,11 @@ class FluTheme : public QObject */ Q_PROPERTY_AUTO(bool,nativeText); + /** + * @brief 是否开启动画效果 + */ + Q_PROPERTY_AUTO(bool,enableAnimation); + QML_NAMED_ELEMENT(FluTheme) QML_SINGLETON private: diff --git a/src/imports/FluentUI/Controls/FluAutoSuggestBox.qml b/src/imports/FluentUI/Controls/FluAutoSuggestBox.qml index 83675a95..ca3d89b6 100644 --- a/src/imports/FluentUI/Controls/FluAutoSuggestBox.qml +++ b/src/imports/FluentUI/Controls/FluAutoSuggestBox.qml @@ -27,7 +27,7 @@ FluTextBox{ property: "opacity" from:0 to:1 - duration: 83 + duration: FluTheme.enableAnimation ? 83 : 0 } } background: FluRectangle{ diff --git a/src/imports/FluentUI/Controls/FluBreadcrumbBar.qml b/src/imports/FluentUI/Controls/FluBreadcrumbBar.qml index 93565ebe..1527af06 100644 --- a/src/imports/FluentUI/Controls/FluBreadcrumbBar.qml +++ b/src/imports/FluentUI/Controls/FluBreadcrumbBar.qml @@ -33,7 +33,7 @@ Item { properties: "opacity" from: 1 to: 0 - duration: 83 + duration: FluTheme.enableAnimation ? 83 : 0 } } add: Transition { @@ -41,7 +41,7 @@ Item { properties: "opacity" from: 0 to: 1 - duration: 83 + duration: FluTheme.enableAnimation ? 83 : 0 } } delegate: Item{ diff --git a/src/imports/FluentUI/Controls/FluCalendarPicker.qml b/src/imports/FluentUI/Controls/FluCalendarPicker.qml index f439919f..02bf1250 100644 --- a/src/imports/FluentUI/Controls/FluCalendarPicker.qml +++ b/src/imports/FluentUI/Controls/FluCalendarPicker.qml @@ -65,7 +65,7 @@ Rectangle { property: "opacity" from:0 to:1 - duration: 83 + duration: FluTheme.enableAnimation ? 83 : 0 } } exit:Transition { @@ -73,7 +73,7 @@ Rectangle { property: "opacity" from:1 to:0 - duration: 83 + duration: FluTheme.enableAnimation ? 83 : 0 } } contentItem: Item{ diff --git a/src/imports/FluentUI/Controls/FluCheckBox.qml b/src/imports/FluentUI/Controls/FluCheckBox.qml index f76659ff..13513eba 100644 --- a/src/imports/FluentUI/Controls/FluCheckBox.qml +++ b/src/imports/FluentUI/Controls/FluCheckBox.qml @@ -87,6 +87,7 @@ Button { return normalColor } Behavior on color { + enabled: FluTheme.enableAnimation ColorAnimation{ duration: 83 } @@ -98,6 +99,7 @@ Button { visible: checked iconColor: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1) Behavior on visible { + enabled: FluTheme.enableAnimation NumberAnimation{ duration: 83 } diff --git a/src/imports/FluentUI/Controls/FluColorPicker.qml b/src/imports/FluentUI/Controls/FluColorPicker.qml index b16ac747..e18f92fd 100644 --- a/src/imports/FluentUI/Controls/FluColorPicker.qml +++ b/src/imports/FluentUI/Controls/FluColorPicker.qml @@ -50,7 +50,7 @@ Button{ property: "opacity" from:0 to:1 - duration: 83 + duration: FluTheme.enableAnimation ? 83 : 0 } } @@ -59,7 +59,7 @@ Button{ property: "opacity" from:1 to:0 - duration: 83 + duration: FluTheme.enableAnimation ? 83 : 0 } } function showPopup() { diff --git a/src/imports/FluentUI/Controls/FluComboBox.qml b/src/imports/FluentUI/Controls/FluComboBox.qml index 06e8a10b..b85f4560 100644 --- a/src/imports/FluentUI/Controls/FluComboBox.qml +++ b/src/imports/FluentUI/Controls/FluComboBox.qml @@ -113,7 +113,7 @@ ComboBox { property: "opacity" from:0 to:1 - duration: 83 + duration: FluTheme.enableAnimation ? 83 : 0 } } exit:Transition { @@ -121,7 +121,7 @@ ComboBox { property: "opacity" from:1 to:0 - duration: 83 + duration: FluTheme.enableAnimation ? 83 : 0 } } background:Rectangle{ diff --git a/src/imports/FluentUI/Controls/FluDatePicker.qml b/src/imports/FluentUI/Controls/FluDatePicker.qml index 38dcfa0c..2a572023 100644 --- a/src/imports/FluentUI/Controls/FluDatePicker.qml +++ b/src/imports/FluentUI/Controls/FluDatePicker.qml @@ -101,7 +101,7 @@ Rectangle { property: "opacity" from:0 to:1 - duration: 83 + duration: FluTheme.enableAnimation ? 83 : 0 } } exit:Transition { @@ -109,7 +109,7 @@ Rectangle { property: "opacity" from:1 to:0 - duration: 83 + duration: FluTheme.enableAnimation ? 83 : 0 } } background:Item{ diff --git a/src/imports/FluentUI/Controls/FluExpander.qml b/src/imports/FluentUI/Controls/FluExpander.qml index 0cb8d581..3c165514 100644 --- a/src/imports/FluentUI/Controls/FluExpander.qml +++ b/src/imports/FluentUI/Controls/FluExpander.qml @@ -54,6 +54,7 @@ Item { iconSource:FluentIcons.ChevronUp iconSize: 15 Behavior on rotation { + enabled: FluTheme.enableAnimation NumberAnimation{ duration: 167 easing.type: Easing.OutCubic @@ -103,7 +104,7 @@ Item { to:"expand" NumberAnimation { properties: "y" - duration: 167 + duration: FluTheme.enableAnimation ? 167 : 0 easing.type: Easing.OutCubic } }, @@ -111,7 +112,7 @@ Item { to:"collapsed" NumberAnimation { properties: "y" - duration: 167 + duration: FluTheme.enableAnimation ? 167 : 0 easing.type: Easing.OutCubic } } diff --git a/src/imports/FluentUI/Controls/FluInfoBar.qml b/src/imports/FluentUI/Controls/FluInfoBar.qml index e2087803..f662a62a 100644 --- a/src/imports/FluentUI/Controls/FluInfoBar.qml +++ b/src/imports/FluentUI/Controls/FluInfoBar.qml @@ -49,7 +49,11 @@ FluObject { spacing: 20 width: parent.width move: Transition { - NumberAnimation { properties: "y"; easing.type: Easing.OutBack; duration: 300 } + NumberAnimation { + properties: "y" + easing.type: Easing.OutCubic + duration: FluTheme.enableAnimation ? 333 : 0 + } } onChildrenChanged: if(children.length === 0) destroy(); function getLastloader(){ @@ -89,9 +93,10 @@ FluObject { scale: item ? 1 : 0; asynchronous: true Behavior on scale { + enabled: FluTheme.enableAnimation NumberAnimation { - easing.type: Easing.OutBack; - duration: 100 + easing.type: Easing.OutCubic + duration: 167 } } sourceComponent:itemcomponent ? itemcomponent : mcontrol.fluent_sytle; diff --git a/src/imports/FluentUI/Controls/FluMenu.qml b/src/imports/FluentUI/Controls/FluMenu.qml index 26646dd0..5090f3ac 100644 --- a/src/imports/FluentUI/Controls/FluMenu.qml +++ b/src/imports/FluentUI/Controls/FluMenu.qml @@ -5,7 +5,7 @@ import QtQuick.Templates as T import FluentUI T.Menu { - property bool animEnabled: true + property bool enableAnimation: true id: control implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, contentWidth + leftPadding + rightPadding) @@ -20,7 +20,7 @@ T.Menu { property: "opacity" from:0 to:1 - duration: animEnabled ? 83 : 0 + duration: FluTheme.enableAnimation && control.enableAnimation ? 83 : 0 } } exit:Transition { @@ -28,7 +28,7 @@ T.Menu { property: "opacity" from:1 to:0 - duration: animEnabled ? 83 : 0 + duration: FluTheme.enableAnimation && control.enableAnimation ? 83 : 0 } } contentItem: ListView { diff --git a/src/imports/FluentUI/Controls/FluNavigationView.qml b/src/imports/FluentUI/Controls/FluNavigationView.qml index 2b6006a3..57cc1e17 100644 --- a/src/imports/FluentUI/Controls/FluNavigationView.qml +++ b/src/imports/FluentUI/Controls/FluNavigationView.qml @@ -128,6 +128,7 @@ Item { return 30 } Behavior on height { + enabled: FluTheme.enableAnimation NumberAnimation{ duration: 83 } @@ -232,6 +233,7 @@ Item { return true } Behavior on rotation { + enabled: FluTheme.enableAnimation NumberAnimation{ duration: 167 easing.type: Easing.OutCubic @@ -318,6 +320,7 @@ Item { id:com_panel_item Item{ Behavior on height { + enabled: FluTheme.enableAnimation NumberAnimation{ duration: 83 } @@ -557,11 +560,13 @@ Item { visible: opacity opacity: d.isMinimal Behavior on opacity{ + enabled: FluTheme.enableAnimation NumberAnimation{ duration: 83 } } Behavior on Layout.preferredWidth { + enabled: FluTheme.enableAnimation NumberAnimation{ duration: 167 easing.type: Easing.OutCubic @@ -660,6 +665,7 @@ Item { } } Behavior on anchors.leftMargin { + enabled: FluTheme.enableAnimation NumberAnimation{ duration: 167 easing.type: Easing.OutCubic @@ -698,12 +704,14 @@ Item { } x: visible ? 0 : -width Behavior on width { + enabled: FluTheme.enableAnimation NumberAnimation{ duration: 167 easing.type: Easing.OutCubic } } Behavior on x { + enabled: FluTheme.enableAnimation NumberAnimation{ duration: 167 easing.type: Easing.OutCubic @@ -785,7 +793,7 @@ Item { anchors.fill: parent model:d.handleItems() boundsBehavior: ListView.StopAtBounds - highlightMoveDuration: 167 + highlightMoveDuration: FluTheme.enableAnimation ? 167 : 0 highlight: Item{ clip: true Rectangle{ diff --git a/src/imports/FluentUI/Controls/FluPage.qml b/src/imports/FluentUI/Controls/FluPage.qml index 12936159..5f3312e0 100644 --- a/src/imports/FluentUI/Controls/FluPage.qml +++ b/src/imports/FluentUI/Controls/FluPage.qml @@ -19,7 +19,7 @@ Item { visible: false StackView.onRemoved: destroy() Behavior on opacity{ - enabled: !animDisabled + enabled: !animDisabled && FluTheme.enableAnimation NumberAnimation{ duration: 167 } @@ -27,7 +27,7 @@ Item { transform: Translate { y: control.visible ? 0 : 80 Behavior on y{ - enabled: !animDisabled + enabled: !animDisabled && FluTheme.enableAnimation NumberAnimation{ duration: 167 easing.type: Easing.OutCubic diff --git a/src/imports/FluentUI/Controls/FluPivot.qml b/src/imports/FluentUI/Controls/FluPivot.qml index b72ae9bc..c5671aa7 100644 --- a/src/imports/FluentUI/Controls/FluPivot.qml +++ b/src/imports/FluentUI/Controls/FluPivot.qml @@ -28,7 +28,7 @@ Item { spacing: 20 interactive: false orientation: ListView.Horizontal - highlightMoveDuration: 167 + highlightMoveDuration: FluTheme.enableAnimation ? 167 : 0 highlight: Item{ clip: true Rectangle{ @@ -38,6 +38,7 @@ Item { width: nav_list.currentItem ? nav_list.currentItem.width : 0 y:37 Behavior on width { + enabled: FluTheme.enableAnimation NumberAnimation{ duration: 167 easing.type: Easing.OutCubic diff --git a/src/imports/FluentUI/Controls/FluPopup.qml b/src/imports/FluentUI/Controls/FluPopup.qml index e0984c0e..8c802fc3 100644 --- a/src/imports/FluentUI/Controls/FluPopup.qml +++ b/src/imports/FluentUI/Controls/FluPopup.qml @@ -20,12 +20,12 @@ Popup { properties: "scale" from:1.2 to:1 - duration: 83 + duration: FluTheme.enableAnimation ? 83 : 0 easing.type: Easing.OutCubic } NumberAnimation { property: "opacity" - duration: 83 + duration: FluTheme.enableAnimation ? 83 : 0 from:0 to:1 } @@ -35,12 +35,12 @@ Popup { properties: "scale" from:1 to:1.2 - duration: 83 + duration: FluTheme.enableAnimation ? 83 : 0 easing.type: Easing.OutCubic } NumberAnimation { property: "opacity" - duration: 83 + duration: FluTheme.enableAnimation ? 83 : 0 from:1 to:0 } diff --git a/src/imports/FluentUI/Controls/FluRadioButton.qml b/src/imports/FluentUI/Controls/FluRadioButton.qml index d8776b9b..2e96ad29 100644 --- a/src/imports/FluentUI/Controls/FluRadioButton.qml +++ b/src/imports/FluentUI/Controls/FluRadioButton.qml @@ -62,6 +62,7 @@ Button { return checked ? 4 : 1 } Behavior on border.width { + enabled: FluTheme.enableAnimation NumberAnimation{ duration: 167 easing.type: Easing.OutCubic diff --git a/src/imports/FluentUI/Controls/FluSlider.qml b/src/imports/FluentUI/Controls/FluSlider.qml index 92b8b79f..cd77769e 100644 --- a/src/imports/FluentUI/Controls/FluSlider.qml +++ b/src/imports/FluentUI/Controls/FluSlider.qml @@ -36,6 +36,7 @@ T.Slider { return control.hovered ? 6/10 : 5/10 } Behavior on scale { + enabled: FluTheme.enableAnimation NumberAnimation{ duration: 167 easing.type: Easing.OutCubic diff --git a/src/imports/FluentUI/Controls/FluTextBoxBackground.qml b/src/imports/FluentUI/Controls/FluTextBoxBackground.qml index 5c1fbe9a..202cd75d 100644 --- a/src/imports/FluentUI/Controls/FluTextBoxBackground.qml +++ b/src/imports/FluentUI/Controls/FluTextBoxBackground.qml @@ -47,6 +47,7 @@ Rectangle{ } } Behavior on height{ + enabled: FluTheme.enableAnimation NumberAnimation{ duration: 83 easing.type: Easing.OutCubic diff --git a/src/imports/FluentUI/Controls/FluTextBoxMenu.qml b/src/imports/FluentUI/Controls/FluTextBoxMenu.qml index 0a23c07c..061a94e9 100644 --- a/src/imports/FluentUI/Controls/FluTextBoxMenu.qml +++ b/src/imports/FluentUI/Controls/FluTextBoxMenu.qml @@ -9,7 +9,7 @@ FluMenu{ property string selectAllText : "全选" property var inputItem id:menu - animEnabled: false + enableAnimation: false width: 120 onVisibleChanged: { inputItem.forceActiveFocus() diff --git a/src/imports/FluentUI/Controls/FluTimePicker.qml b/src/imports/FluentUI/Controls/FluTimePicker.qml index 3f1a6b74..c8e4cfc4 100644 --- a/src/imports/FluentUI/Controls/FluTimePicker.qml +++ b/src/imports/FluentUI/Controls/FluTimePicker.qml @@ -106,7 +106,7 @@ Rectangle { property: "opacity" from:0 to:1 - duration: 83 + duration: FluTheme.enableAnimation ? 83 : 0 } } exit:Transition { @@ -114,7 +114,7 @@ Rectangle { property: "opacity" from:1 to:0 - duration: 83 + duration: FluTheme.enableAnimation ? 83 : 0 } } background:Item{ diff --git a/src/imports/FluentUI/Controls/FluToggleSwitch.qml b/src/imports/FluentUI/Controls/FluToggleSwitch.qml index 62a3a94a..e8f5b7d7 100644 --- a/src/imports/FluentUI/Controls/FluToggleSwitch.qml +++ b/src/imports/FluentUI/Controls/FluToggleSwitch.qml @@ -69,17 +69,11 @@ Button { return borderNormalColor } Rectangle { - width: pressed ? 28 : 20 - anchors{ - left: checked ? undefined : parent.left - leftMargin: checked ? 20 : 0 - right: checked ? parent.right : undefined - rightMargin: checked ? 0: 20 - } + width: 20 + x:checked ? control_backgound.width-width : 0 height: 20 radius: 10 scale: hovered&enabled ? 7/10 : 6/10 - anchors.verticalCenter: parent.verticalCenter color: { if(!enabled){ return dotDisableColor @@ -89,27 +83,15 @@ Button { } return dotNormalColor } - Behavior on anchors.leftMargin { + Behavior on x { + enabled: FluTheme.enableAnimation NumberAnimation { - duration: 167 - easing.type: Easing.OutCubic - } - } - Behavior on anchors.rightMargin { - NumberAnimation { - duration: 167 - easing.type: Easing.OutCubic - } - } - Behavior on width { - NumberAnimation { - duration: 167 easing.type: Easing.OutCubic } } Behavior on scale { + enabled: FluTheme.enableAnimation NumberAnimation { - duration: 167 easing.type: Easing.OutCubic } }