diff options
Diffstat (limited to 'examples/quick/multieffect/itemswitcher/qml')
23 files changed, 973 insertions, 0 deletions
diff --git a/examples/quick/multieffect/itemswitcher/qml/ItemSwitcher.qml b/examples/quick/multieffect/itemswitcher/qml/ItemSwitcher.qml new file mode 100644 index 0000000000..eb405749be --- /dev/null +++ b/examples/quick/multieffect/itemswitcher/qml/ItemSwitcher.qml @@ -0,0 +1,57 @@ +// Copyright (C) 2022 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +import QtQuick + +Item { + id: rootItem + + property var sourceItems: [] + + property Item fromItem + property Item toItem + + property var effect + + property int currentIndex: 0 + property int previousIndex: 0 + property real inAnimation: 0 + readonly property real outAnimation: 1.0 - inAnimation + // Duration of switch animation, in ms + property int duration: 1500 + + property bool _initialized: false + + onCurrentIndexChanged: { + fromItem = sourceItems[previousIndex]; + toItem = sourceItems[currentIndex]; + if (_initialized) + switchAnimation.restart(); + previousIndex = currentIndex; + } + + // Initialize the items and currentIndex + Timer { + running: true + interval: 0 + onTriggered: { + fromItem = sourceItems[previousIndex]; + toItem = sourceItems[currentIndex]; + previousIndex = currentIndex; + _initialized = true; + } + } + + SequentialAnimation { + id: switchAnimation + alwaysRunToEnd: true + NumberAnimation { + target: rootItem + property: "inAnimation" + from: 0 + to: 1 + duration: rootItem.duration + easing.type: Easing.InOutQuad + } + } +} diff --git a/examples/quick/multieffect/itemswitcher/qml/PagesItem.qml b/examples/quick/multieffect/itemswitcher/qml/PagesItem.qml new file mode 100644 index 0000000000..87b39d4947 --- /dev/null +++ b/examples/quick/multieffect/itemswitcher/qml/PagesItem.qml @@ -0,0 +1,49 @@ +// Copyright (C) 2022 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +import QtQuick + +Item { + id: rootItem + + property Item source + property bool selected: false + property string text + + signal clicked + + Rectangle { + anchors.fill: parent + color: "#000000" + border.color: "#f0f0f0" + opacity: rootItem.selected ? 0.4 : 0 + Behavior on opacity { + NumberAnimation { + duration: 400 + easing.type: Easing.InOutQuad + } + } + } + + ShaderEffectSource { + anchors.fill: parent + anchors.margins: 10 + sourceItem: rootItem.source + smooth: true + mipmap: true + } + Text { + anchors.centerIn: parent + visible: rootItem.text != "" + text: rootItem.text + font.pixelSize: 14 * dp + color: "#ffffff" + } + + MouseArea { + anchors.fill: parent + onClicked: { + rootItem.clicked(); + } + } +} diff --git a/examples/quick/multieffect/itemswitcher/qml/PagesView.qml b/examples/quick/multieffect/itemswitcher/qml/PagesView.qml new file mode 100644 index 0000000000..b6e5c45a94 --- /dev/null +++ b/examples/quick/multieffect/itemswitcher/qml/PagesView.qml @@ -0,0 +1,30 @@ +// Copyright (C) 2022 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +import QtQuick + +Item { + id: rootItem + + property real itemSize: 120 * dp + property real margin: 10 * dp + + default property alias contents: contentItem.children + + width: contentItem.width + 2 * margin + height: itemSize + 2 * margin + + Rectangle { + anchors.fill: parent + color: "#606060" + border.color: "#f0f0f0" + border.width: 1 + opacity: 0.4 + } + Row { + id: contentItem + x: margin + y: margin + spacing: margin + } +} diff --git a/examples/quick/multieffect/itemswitcher/qml/SettingsComponentButton.qml b/examples/quick/multieffect/itemswitcher/qml/SettingsComponentButton.qml new file mode 100644 index 0000000000..26a0085d8a --- /dev/null +++ b/examples/quick/multieffect/itemswitcher/qml/SettingsComponentButton.qml @@ -0,0 +1,35 @@ +// Copyright (C) 2022 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +import QtQuick + +Item { + id: rootItem + + property alias text: textItem.text + property bool selected: false + + signal clicked + + width: parent.width + height: 40 * dp + Rectangle { + anchors.fill: parent + color: "#606060" + border.color: "#d0d0d0" + border.width: 1 + opacity: selected ? 0.8 : 0.4 + } + Text { + id: textItem + anchors.centerIn: parent + font.pixelSize: 16 * dp + color: "#f0f0f0" + } + MouseArea { + anchors.fill: parent + onClicked: { + rootItem.clicked(); + } + } +} diff --git a/examples/quick/multieffect/itemswitcher/qml/SettingsComponentSlider.qml b/examples/quick/multieffect/itemswitcher/qml/SettingsComponentSlider.qml new file mode 100644 index 0000000000..ed04584e44 --- /dev/null +++ b/examples/quick/multieffect/itemswitcher/qml/SettingsComponentSlider.qml @@ -0,0 +1,54 @@ +// Copyright (C) 2022 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +import QtQuick +import QtQuick.Controls +import QtQuick.Controls.Material + +Column { + id: rootItem + + property alias text: textItem.text + property alias value: slider.value + property alias from: slider.from + property alias to: slider.to + property alias checked: checkBox.checked + property alias stepSize: slider.stepSize + property bool showCheckbox: false + + signal toggled + signal moved + + Material.theme: Material.Dark + Material.accent: Material.LightGreen + spacing: -12 + + Text { + id: textItem + anchors.horizontalCenter: parent.horizontalCenter + color: "#f0f0f0" + font.pixelSize: 14 * dp + } + + Row { + CheckBox { + id: checkBox + visible: rootItem.showCheckbox + checked: true + onToggled: { + rootItem.toggled(); + } + } + Slider { + id: slider + property real sliderWidth: settings.settingsViewWidth - 50 + width: rootItem.showCheckbox ? sliderWidth : sliderWidth + checkBox.width + value: 50 + from: 0 + to: 800 + onMoved: { + rootItem.moved(); + } + } + } +} diff --git a/examples/quick/multieffect/itemswitcher/qml/SettingsView.qml b/examples/quick/multieffect/itemswitcher/qml/SettingsView.qml new file mode 100644 index 0000000000..cf1a753b4d --- /dev/null +++ b/examples/quick/multieffect/itemswitcher/qml/SettingsView.qml @@ -0,0 +1,168 @@ +// Copyright (C) 2022 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +import QtQuick +import QtQuick.Controls.Material + +Item { + id: rootItem + + property bool show: true + property real showAnimation: show ? 1 : 0 + + Material.theme: Material.Dark + Material.accent: Material.LightGreen + width: settings.settingsViewWidth + x: -(width + 30) * (1 - showAnimation) + 20 + + Behavior on showAnimation { + NumberAnimation { + duration: 400 + easing.type: Easing.InOutQuad + } + } + + // Open/close button + Item { + width: 30 * dp + height: 30 * dp + anchors.left: parent.right + anchors.leftMargin: 20 + anchors.top: parent.top + anchors.topMargin: -10 + Rectangle { + anchors.fill: parent + color: "#404040" + opacity: 0.4 + border.width: 1 + border.color: "#808080" + } + + Image { + anchors.centerIn: parent + source: "images/arrow.png" + rotation: rootItem.showAnimation * 180 + } + MouseArea { + anchors.fill: parent + anchors.margins: -30 * dp + onClicked: { + rootItem.show = !rootItem.show; + } + } + } + + // Background + Rectangle { + anchors.fill: scrollView + opacity: showAnimation ? 0.6 : 0 + visible: opacity + anchors.margins: -10 + color: "#202020" + border.color: "#808080" + border.width: 1 + } + + ScrollView { + id: scrollView + anchors.fill: parent + ScrollBar.horizontal.policy: ScrollBar.AlwaysOff + ScrollBar.vertical.interactive: false + clip: true + Column { + id: settingsArea + width: rootItem.width + opacity: showAnimation + visible: opacity + spacing: 8 * dp + + Item { + width: 1 + height: 20 * dp + } + Image { + anchors.horizontalCenter: parent.horizontalCenter + fillMode: Image.PreserveAspectFit + width: parent.width * 0.8 + height: width * 0.25 + source: "images/Built_with_Qt_RGB_logo.png" + } + Item { + width: 1 + height: 28 * dp + } + Text { + anchors.horizontalCenter: parent.horizontalCenter + text: qsTr("Switching Effects") + font.pixelSize: 20 * dp + font.bold: true + color: "#f0f0f0" + } + SettingsComponentButton { + text: "Blinds" + selected: settings.effectIndex === 0 + onClicked: { + settings.effectIndex = 0; + } + } + SettingsComponentButton { + text: "Blurry" + selected: settings.effectIndex === 1 + onClicked: { + settings.effectIndex = 1; + } + } + SettingsComponentButton { + text: "Heart" + selected: settings.effectIndex === 2 + onClicked: { + settings.effectIndex = 2; + } + } + SettingsComponentButton { + text: "Stars" + selected: settings.effectIndex === 3 + onClicked: { + settings.effectIndex = 3; + } + } + SettingsComponentButton { + text: "Thunder" + selected: settings.effectIndex === 4 + onClicked: { + settings.effectIndex = 4; + } + } + SettingsComponentButton { + text: "3D Flip" + selected: settings.effectIndex === 5 + onClicked: { + settings.effectIndex = 5; + } + } + Item { + width: 1 + height: 10 + } + + SettingsComponentSlider { + text: qsTr("Animation Duration") + ": " + value.toFixed(0) + " ms" + value: settings.switchDuration + from: 500 + to: 5000 + onMoved: { + settings.switchDuration = value; + } + } + SettingsComponentSlider { + text: qsTr("Animation Time") + ": " + (value * settings.switchDuration).toFixed(0) + " ms" + value: itemSwitcher.inAnimation + from: 0 + to: 1 + onMoved: { + itemSwitcher.inAnimation = value; + } + } + } + } +} diff --git a/examples/quick/multieffect/itemswitcher/qml/SwitchEffect3DFlip.qml b/examples/quick/multieffect/itemswitcher/qml/SwitchEffect3DFlip.qml new file mode 100644 index 0000000000..bb33b8c6b6 --- /dev/null +++ b/examples/quick/multieffect/itemswitcher/qml/SwitchEffect3DFlip.qml @@ -0,0 +1,93 @@ +// Copyright (C) 2022 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +import QtQuick +import QtQuick.Effects + +Item { + id: rootItem + // We expect all effects to be placed under ItemSwitcher + property Item switcher: rootItem.parent + + anchors.fill: parent + + MultiEffect { + source: switcher.fromItem + width: parent.width + height: parent.height + x: switcher.inAnimation * rootItem.width + blurEnabled: true + blur: switcher.inAnimation + blurMax: 32 + blurMultiplier: 0.5 + opacity: switcher.outAnimation + + saturation: -switcher.inAnimation * 1.5 + + maskEnabled: true + maskSource: Image { + source: "images/smoke.png" + visible: false + } + maskThresholdMin: switcher.inAnimation * 0.6 + maskSpreadAtMin: 0.1 + maskThresholdMax: 1.0 - (switcher.inAnimation * 0.6) + maskSpreadAtMax: 0.1 + + shadowEnabled: true + shadowOpacity: 0.5 + shadowBlur: 0.8 + shadowVerticalOffset: 5 + shadowHorizontalOffset: 10 + (x * 0.2) + shadowScale: 1.02 + + transform: Rotation { + origin.x: parent.width / 2 + origin.y: parent.height / 2 + axis { x: 0; y: 1; z: 0 } + angle: switcher.inAnimation * 60 + } + rotation: -switcher.inAnimation * 20 + scale: 1.0 + (switcher.inAnimation * 0.2) + } + + MultiEffect { + source: switcher.toItem + width: parent.width + height: parent.height + x: -switcher.outAnimation * rootItem.width + blurEnabled: true + blur: switcher.outAnimation * 2 + blurMax: 32 + blurMultiplier: 0.5 + opacity: switcher.inAnimation + + saturation: -switcher.outAnimation * 1.5 + + maskEnabled: true + maskSource: Image { + source: "images/smoke.png" + visible: false + } + maskThresholdMin: switcher.outAnimation * 0.6 + maskSpreadAtMin: 0.1 + maskThresholdMax: 1.0 - (switcher.outAnimation * 0.6) + maskSpreadAtMax: 0.1 + + shadowEnabled: true + shadowOpacity: 0.5 + shadowBlur: 0.8 + shadowVerticalOffset: 5 + shadowHorizontalOffset: 10 + (x * 0.2) + shadowScale: 1.02 + + transform: Rotation { + origin.x: parent.width / 2 + origin.y: parent.height / 2 + axis { x: 0; y: 1; z: 0 } + angle: -switcher.outAnimation * 60 + } + rotation: switcher.outAnimation * 20 + scale: 1.0 - (switcher.outAnimation * 0.4) + } +} diff --git a/examples/quick/multieffect/itemswitcher/qml/SwitchEffectBlinds.qml b/examples/quick/multieffect/itemswitcher/qml/SwitchEffectBlinds.qml new file mode 100644 index 0000000000..8849631be9 --- /dev/null +++ b/examples/quick/multieffect/itemswitcher/qml/SwitchEffectBlinds.qml @@ -0,0 +1,49 @@ +// Copyright (C) 2022 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +import QtQuick +import QtQuick.Effects + +Item { + id: rootItem + // We expect all effects to be placed under ItemSwitcher + property Item switcher: rootItem.parent + property real rotation: 0 + + anchors.fill: parent + + Item { + id: mask + anchors.fill: parent + layer.enabled: true + visible: false + smooth: false + clip: true + Image { + anchors.fill: parent + anchors.margins: -parent.width * 0.25 + source: "images/hblinds.png" + rotation: rootItem.rotation + smooth: false + } + } + + // Item going out + MultiEffect { + source: switcher.fromItem + anchors.fill: parent + maskEnabled: true + maskSource: mask + maskThresholdMin: switcher.inAnimation + maskSpreadAtMin: 0.4 + } + // Item coming in + MultiEffect { + source: switcher.toItem + anchors.fill: parent + maskEnabled: true + maskSource: mask + maskThresholdMax: switcher.inAnimation + maskSpreadAtMax: 0.4 + } +} diff --git a/examples/quick/multieffect/itemswitcher/qml/SwitchEffectBlur.qml b/examples/quick/multieffect/itemswitcher/qml/SwitchEffectBlur.qml new file mode 100644 index 0000000000..7df93a2f99 --- /dev/null +++ b/examples/quick/multieffect/itemswitcher/qml/SwitchEffectBlur.qml @@ -0,0 +1,34 @@ +// Copyright (C) 2022 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +import QtQuick +import QtQuick.Effects + +Item { + id: rootItem + // We expect all effects to be placed under ItemSwitcher + property Item switcher: rootItem.parent + + anchors.fill: parent + + MultiEffect { + source: switcher.fromItem + anchors.fill: parent + blurEnabled: true + blur: switcher.inAnimation * 4 + blurMax: 32 + blurMultiplier: 0.5 + opacity: switcher.outAnimation + saturation: -switcher.inAnimation * 2 + } + MultiEffect { + source: switcher.toItem + anchors.fill: parent + blurEnabled: true + blur: switcher.outAnimation * 4 + blurMax: 32 + blurMultiplier: 0.5 + opacity: switcher.inAnimation + saturation: -switcher.outAnimation * 2 + } +} diff --git a/examples/quick/multieffect/itemswitcher/qml/SwitchEffectHeart.qml b/examples/quick/multieffect/itemswitcher/qml/SwitchEffectHeart.qml new file mode 100644 index 0000000000..e80c54460c --- /dev/null +++ b/examples/quick/multieffect/itemswitcher/qml/SwitchEffectHeart.qml @@ -0,0 +1,48 @@ +// Copyright (C) 2022 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +import QtQuick +import QtQuick.Effects + +Item { + id: rootItem + // We expect all effects to be placed under ItemSwitcher + property Item switcher: rootItem.parent + + anchors.fill: parent + + Item { + id: mask + anchors.fill: parent + layer.enabled: true + visible: false + clip: true + Image { + anchors.fill: parent + source: "images/heart.png" + scale: switcher.inAnimation * 3 + } + } + + // Item going out + MultiEffect { + source: switcher.fromItem + anchors.fill: parent + maskEnabled: true + maskSource: mask + maskInverted: true + maskThresholdMin: 0.5 + maskSpreadAtMin: 0.0 + } + // Item coming in + MultiEffect { + source: switcher.toItem + anchors.fill: parent + maskEnabled: true + maskSource: mask + maskThresholdMin: 0.5 + maskSpreadAtMin: 0.0 + colorizationColor: "red" + colorization: Math.max(0, 1.0 - switcher.inAnimation * 2) + } +} diff --git a/examples/quick/multieffect/itemswitcher/qml/SwitchEffectStars.qml b/examples/quick/multieffect/itemswitcher/qml/SwitchEffectStars.qml new file mode 100644 index 0000000000..c533572e66 --- /dev/null +++ b/examples/quick/multieffect/itemswitcher/qml/SwitchEffectStars.qml @@ -0,0 +1,50 @@ +// Copyright (C) 2022 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +import QtQuick +import QtQuick.Effects + +Item { + id: rootItem + // We expect all effects to be placed under ItemSwitcher + property Item switcher: rootItem.parent + + anchors.fill: parent + + Item { + id: mask + anchors.fill: parent + layer.enabled: true + visible: false + clip: true + Image { + anchors.fill: parent + source: "images/star.png" + scale: switcher.inAnimation * 5 + rotation: switcher.outAnimation * 360 + } + } + + // Item going out + MultiEffect { + source: switcher.fromItem + anchors.fill: parent + maskEnabled: true + maskSource: mask + maskInverted: true + maskThresholdMin: 0.5 + maskSpreadAtMin: 0.5 + } + // Item coming in + MultiEffect { + source: switcher.toItem + anchors.fill: parent + maskEnabled: true + maskSource: mask + maskThresholdMin: 0.5 + maskSpreadAtMin: 0.5 + colorizationColor: "#ffd020" + colorization: Math.max(0, 1.0 - switcher.inAnimation * 2) + brightness: Math.max(0.0, 0.8 - switcher.inAnimation * 2) + } +} diff --git a/examples/quick/multieffect/itemswitcher/qml/SwitchEffectThunder.qml b/examples/quick/multieffect/itemswitcher/qml/SwitchEffectThunder.qml new file mode 100644 index 0000000000..80a6e9bf8f --- /dev/null +++ b/examples/quick/multieffect/itemswitcher/qml/SwitchEffectThunder.qml @@ -0,0 +1,87 @@ +// Copyright (C) 2022 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +import QtQuick +import QtQuick.Effects + +Item { + id: rootItem + // We expect all effects to be placed under ItemSwitcher + property Item switcher: rootItem.parent + + property real _xPos: Math.sin(switcher.inAnimation * Math.PI * 50) * width * 0.03 * (0.5 - Math.abs(0.5 - switcher.inAnimation)) + property real _yPos: Math.sin(switcher.inAnimation * Math.PI * 35) * width * 0.02 * (0.5 - Math.abs(0.5 - switcher.inAnimation)) + + anchors.fill: parent + + Image { + id: maskImage + source: "images/stripes.png" + visible: false + } + + MultiEffect { + source: switcher.fromItem + width: parent.width + height: parent.height + x: rootItem._xPos + y: rootItem._yPos + blurEnabled: true + blur: switcher.inAnimation + blurMax: 32 + blurMultiplier: 0.5 + opacity: switcher.outAnimation + colorizationColor: "#f0d060" + colorization: switcher.inAnimation + + contrast: switcher.inAnimation + brightness: switcher.inAnimation + + maskEnabled: true + maskSource: maskImage + maskThresholdMin: switcher.inAnimation * 0.9 + maskSpreadAtMin: 0.2 + maskThresholdMax: 1.0 + + shadowEnabled: true + shadowColor: "#f04000" + shadowBlur: 1.0 + shadowOpacity: 5.0 - switcher.outAnimation * 5.0 + shadowHorizontalOffset: 0 + shadowVerticalOffset: 0 + shadowScale: 1.04 + + } + MultiEffect { + source: switcher.toItem + width: parent.width + height: parent.height + x: -rootItem._xPos + y: -rootItem._yPos + blurEnabled: true + blur: switcher.outAnimation * 2 + blurMax: 32 + blurMultiplier: 0.5 + opacity: switcher.inAnimation * 3.0 - 1.0 + + colorizationColor: "#f0d060" + colorization: switcher.outAnimation + contrast: switcher.outAnimation + brightness: switcher.outAnimation + + maskEnabled: true + maskSource: maskImage + maskThresholdMin: switcher.outAnimation * 0.6 + maskSpreadAtMin: 0.2 + maskThresholdMax: 1.0 + + shadowEnabled: true + shadowColor: "#f04000" + shadowBlur: 1.0 + shadowOpacity: 5.0 - switcher.inAnimation * 5.0 + shadowHorizontalOffset: 0 + shadowVerticalOffset: 0 + shadowScale: 1.04 + } + +} diff --git a/examples/quick/multieffect/itemswitcher/qml/images/Built_with_Qt.png b/examples/quick/multieffect/itemswitcher/qml/images/Built_with_Qt.png Binary files differnew file mode 100644 index 0000000000..e612481510 --- /dev/null +++ b/examples/quick/multieffect/itemswitcher/qml/images/Built_with_Qt.png diff --git a/examples/quick/multieffect/itemswitcher/qml/images/Built_with_Qt_RGB_logo.png b/examples/quick/multieffect/itemswitcher/qml/images/Built_with_Qt_RGB_logo.png Binary files differnew file mode 100644 index 0000000000..8d2dfc17ec --- /dev/null +++ b/examples/quick/multieffect/itemswitcher/qml/images/Built_with_Qt_RGB_logo.png diff --git a/examples/quick/multieffect/itemswitcher/qml/images/arrow.png b/examples/quick/multieffect/itemswitcher/qml/images/arrow.png Binary files differnew file mode 100644 index 0000000000..067bec4509 --- /dev/null +++ b/examples/quick/multieffect/itemswitcher/qml/images/arrow.png diff --git a/examples/quick/multieffect/itemswitcher/qml/images/background.png b/examples/quick/multieffect/itemswitcher/qml/images/background.png Binary files differnew file mode 100644 index 0000000000..9b9e9e487d --- /dev/null +++ b/examples/quick/multieffect/itemswitcher/qml/images/background.png diff --git a/examples/quick/multieffect/itemswitcher/qml/images/hblinds.png b/examples/quick/multieffect/itemswitcher/qml/images/hblinds.png Binary files differnew file mode 100644 index 0000000000..09ce73ee03 --- /dev/null +++ b/examples/quick/multieffect/itemswitcher/qml/images/hblinds.png diff --git a/examples/quick/multieffect/itemswitcher/qml/images/heart.png b/examples/quick/multieffect/itemswitcher/qml/images/heart.png Binary files differnew file mode 100644 index 0000000000..dda1f4bab1 --- /dev/null +++ b/examples/quick/multieffect/itemswitcher/qml/images/heart.png diff --git a/examples/quick/multieffect/itemswitcher/qml/images/quit_coding.png b/examples/quick/multieffect/itemswitcher/qml/images/quit_coding.png Binary files differnew file mode 100644 index 0000000000..0930013af4 --- /dev/null +++ b/examples/quick/multieffect/itemswitcher/qml/images/quit_coding.png diff --git a/examples/quick/multieffect/itemswitcher/qml/images/smoke.png b/examples/quick/multieffect/itemswitcher/qml/images/smoke.png Binary files differnew file mode 100644 index 0000000000..83dfcc453c --- /dev/null +++ b/examples/quick/multieffect/itemswitcher/qml/images/smoke.png diff --git a/examples/quick/multieffect/itemswitcher/qml/images/star.png b/examples/quick/multieffect/itemswitcher/qml/images/star.png Binary files differnew file mode 100644 index 0000000000..f83bd87892 --- /dev/null +++ b/examples/quick/multieffect/itemswitcher/qml/images/star.png diff --git a/examples/quick/multieffect/itemswitcher/qml/images/stripes.png b/examples/quick/multieffect/itemswitcher/qml/images/stripes.png Binary files differnew file mode 100644 index 0000000000..7a79767e6e --- /dev/null +++ b/examples/quick/multieffect/itemswitcher/qml/images/stripes.png diff --git a/examples/quick/multieffect/itemswitcher/qml/main.qml b/examples/quick/multieffect/itemswitcher/qml/main.qml new file mode 100644 index 0000000000..9685c71ccb --- /dev/null +++ b/examples/quick/multieffect/itemswitcher/qml/main.qml @@ -0,0 +1,219 @@ +// Copyright (C) 2022 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +import QtQuick +import QtQuick.Window +import QtQuick.Controls +import QtQuick.Controls.Material + +Rectangle { + id: mainWindow + + // Multiplier for resolution independency + readonly property real dp: 0.2 + Math.min(width, height) / 1200 + + width: 1280 + height: 720 + visible: true + color: "#404040" + + QtObject { + id: settings + property real settingsViewWidth: 100 + 150 * dp + property int effectIndex: 0 + property int switchDuration: 1500 + property int itemSize: mainWindow.height * 0.6 + } + + Item { + id: testItem1 + width: 1 + height: 1 + } + + Rectangle { + id: testItem2 + anchors.fill: itemSwitcher + color: "#d0d0d0" + visible: false + Image { + anchors.fill: parent + anchors.margins: 4 + source: "images/background.png" + } + Text { + anchors.centerIn: parent + font.pixelSize: 40 * dp + horizontalAlignment: Text.AlignHCenter + text: "This is the\nfirst item" + color: "#ffffff" + style: Text.Outline + styleColor: "#202020" + } + } + + Rectangle { + id: testItem3Content + anchors.fill: itemSwitcher + color: "white" + border.width: 5 + visible: itemSwitcher.currentIndex === 2 + Text { + anchors.centerIn: parent + font.pixelSize: 48 * dp + horizontalAlignment: Text.AlignHCenter + text: "This is a\nDIFFERENT\nsecond item" + rotation: slider.value * 360 + } + Slider { + id: slider + anchors.top: parent.top + anchors.topMargin: 20 * dp + anchors.horizontalCenter: parent.horizontalCenter + from: 0 + to: 1 + width: parent.width * 0.8 + } + Button { + anchors.bottom: parent.bottom + anchors.bottomMargin: 20 * dp + anchors.horizontalCenter: parent.horizontalCenter + text: "Controls Button" + } + } + ShaderEffectSource { + // Wrap testItem3 into ShaderEffectSource so it doesn't need + // visible = false and can be interactive. + id: testItem3 + anchors.fill: testItem3Content + sourceItem: testItem3Content + hideSource: true + visible: false + } + + Image { + id: testItem4 + source: "images/Built_with_Qt.png" + anchors.fill: itemSwitcher + visible: false + } + + Image { + id: testItem5 + source: "images/quit_coding.png" + anchors.fill: itemSwitcher + visible: false + } + + Item { + id: mainArea + anchors.left: settingsView.right + anchors.right: parent.right + anchors.top: parent.top + anchors.bottom: parent.bottom + + PagesView { + id: pagesView + anchors.horizontalCenter: parent.horizontalCenter + anchors.top: parent.top + anchors.topMargin: 20 * dp + PagesItem { + width: pagesView.itemSize + height: pagesView.itemSize + source: testItem1 + text: "(EMPTY)" + selected: itemSwitcher.currentIndex === 0 + onClicked: { + itemSwitcher.currentIndex = 0; + } + } + PagesItem { + width: pagesView.itemSize + height: pagesView.itemSize + source: testItem2 + selected: itemSwitcher.currentIndex === 1 + onClicked: { + itemSwitcher.currentIndex = 1; + } + } + PagesItem { + width: pagesView.itemSize + height: pagesView.itemSize + source: testItem3 + selected: itemSwitcher.currentIndex === 2 + onClicked: { + itemSwitcher.currentIndex = 2; + } + } + PagesItem { + width: pagesView.itemSize + height: pagesView.itemSize + source: testItem4 + selected: itemSwitcher.currentIndex === 3 + onClicked: { + itemSwitcher.currentIndex = 3; + } + } + PagesItem { + width: pagesView.itemSize + height: pagesView.itemSize + source: testItem5 + selected: itemSwitcher.currentIndex === 4 + onClicked: { + itemSwitcher.currentIndex = 4; + } + } + } + } + ItemSwitcher { + id: itemSwitcher + anchors.centerIn: mainArea + anchors.verticalCenterOffset: pagesView.height / 2 + width: settings.itemSize + height: settings.itemSize + duration: settings.switchDuration + Component.onCompleted: { + // Add all switchable items into switcher + sourceItems.push(testItem1); + sourceItems.push(testItem2); + sourceItems.push(testItem3); + sourceItems.push(testItem4); + sourceItems.push(testItem5); + // From item is the currently selected one + currentIndex = settings.effectIndex; + } + + SwitchEffectBlinds { + id: blindsEffect + visible: settings.effectIndex == 0 + rotation: 45 + } + SwitchEffectBlur { + id: blurEffect + visible: settings.effectIndex == 1 + } + SwitchEffectHeart { + id: heartEffect + visible: settings.effectIndex == 2 + } + SwitchEffectStars { + id: starsEffect + visible: settings.effectIndex == 3 + } + SwitchEffectThunder { + id: thunderEffect + visible: settings.effectIndex == 4 + } + SwitchEffect3DFlip { + id: flipEffect + visible: settings.effectIndex == 5 + } + } + + SettingsView { + id: settingsView + anchors.top: parent.top + anchors.bottom: parent.bottom + anchors.margins: 20 + } +} |
