1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170
|
// Copyright (C) 2022 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Shapes
Item {
id: rootItem
property real showAnimationProgress: 0
property int itemWidth: 256 * dp
property int lineSpacing1: 0
property int lineWidth1: 20 * dp
property int lineSpacing2: 10 * dp
property int lineWidth2: 10 * dp
readonly property int cx: itemWidth / 2
readonly property int cy: itemWidth / 2
signal animationFinished
function startShow() {
hideAnimationItem.stop();
showAnimationItem.restart();
}
function stopShow() {
showAnimationItem.stop();
hideAnimationItem.restart();
}
function ringProgress() {
return showAnimationProgress * (2 * Math.PI) - (Math.PI / 2);
}
function useLargeArcFunc() {
return (ringProgress() > Math.PI / 2);
}
anchors.fill: parent
visible: opacity
opacity: 0
SequentialAnimation {
id: showAnimationItem
PauseAnimation {
duration: 400
}
ScriptAction {
script: {
rootItem.showAnimationProgress = 0;
}
}
NumberAnimation {
target: rootItem
property: "opacity"
to: 1
duration: 400
easing.type: Easing.InOutQuad
}
NumberAnimation {
target: rootItem
property: "showAnimationProgress"
to: 1
duration: 2000
easing.type: Easing.InOutQuad
}
ScriptAction {
script: rootItem.animationFinished();
}
}
SequentialAnimation {
id: hideAnimationItem
NumberAnimation {
target: rootItem
property: "opacity"
to: 0
duration: 400
easing.type: Easing.InOutQuad
}
ScriptAction {
script: {
rootItem.showAnimationProgress = 0;
}
}
}
Rectangle {
anchors.fill: parent
color: "#000000"
opacity: 0.6
}
Shape {
id: shapeItem
x: (parent.width / 2) - (itemWidth / 2)
y: (parent.height / 2) - (itemWidth / 2)
opacity: rootItem.showAnimationProgress
width: itemWidth
height: itemWidth
rotation: rootItem.showAnimationProgress * 360
ShapePath {
strokeColor: "#606060"
fillColor: "transparent"
strokeWidth: lineWidth1
capStyle: ShapePath.RoundCap
PathMove {
x: itemWidth / 2
y: pathArc1.spacing
}
PathArc {
id: pathArc1
property real spacing: lineSpacing1 + lineWidth1
x: cx + ((itemWidth / 2 - spacing) * Math.cos(ringProgress()))
y: cy + ((itemWidth / 2 - spacing) * Math.sin(ringProgress()))
radiusX: itemWidth / 2 - spacing
radiusY: itemWidth / 2 - spacing
useLargeArc: useLargeArcFunc()
}
}
ShapePath {
strokeColor: "#808080"
fillColor: "transparent"
strokeWidth: lineWidth2
capStyle: ShapePath.RoundCap
PathMove {
x: itemWidth / 2
y: pathArc2.spacing
}
PathArc {
id: pathArc2
property real spacing: lineSpacing2 + lineWidth2
x: cx + ((itemWidth / 2 - spacing) * Math.cos(ringProgress()))
y: cy + ((itemWidth / 2 - spacing) * Math.sin(ringProgress()))
radiusX: itemWidth / 2 - spacing
radiusY: itemWidth / 2 - spacing
useLargeArc: useLargeArcFunc()
}
}
}
Text {
id: textItem
anchors.centerIn: shapeItem
font.pixelSize: 32 * dp
color: "#d0d0d0"
text: showAnimationProgress < 1 ? qsTr("Reset to default settings?") : qsTr("Reseted!")
Behavior on text {
SequentialAnimation {
NumberAnimation {
target: textItem
properties: "scale, opacity"
to: 0
duration: 200
easing.type: Easing.InOutQuad
}
PropertyAction {
target: textItem
property: "text"
}
NumberAnimation {
target: textItem
properties: "scale, opacity"
to: 1.0
duration: 200
easing.type: Easing.InOutQuad
}
}
}
}
}
|