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
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
|
// Copyright (C) 2019 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick 2.8
import QtQuick.Timeline 1.0
import QtQuick.Controls 2.3
Item {
id: root
width: 350
height: 1080
property alias slidermenuSlider_4BValue: slidermenu.slider_4BValue
property alias slidermenuSlider_4AValue: slidermenu.slider_4AValue
property alias slidermenuSlider_3CValue: slidermenu.slider_3CValue
property alias slidermenuSlider_3BValue: slidermenu.slider_3BValue
property alias slidermenuSlider_3AValue: slidermenu.slider_3AValue
property alias slidermenuSlider_1BValue: slidermenu.slider_1BValue
property alias slidermenuSlider_1CValue: slidermenu.slider_1CValue
property alias slidermenuSlider_2BValue: slidermenu.slider_2BValue
property alias slidermenuSlider_2AValue: slidermenu.slider_2AValue
property alias slidermenuSlider_1AValue: slidermenu.slider_1AValue
state: "closed"
Image {
id: sideMenuAsset
x: 0
y: 0
visible: false
source: "assets/rectangle_3_195_205.png"
}
Image {
id: imageOutline
x: -423
y: 0
height: 1079
source: "assets/empty_rect.png"
}
Image {
id: imageBackground
x: 0
y: 0
source: "assets/rectangle_3_195_205.png"
SliderMenu {
id: slidermenu
width: 349
height: 1079
slider_1AValue: -0.3
}
}
BurgerMenu {
id: burger_menu
x: 22
y: 20
}
Timeline {
id: timeline
enabled: true
animations: [
TimelineAnimation {
id: timelineAnimation
property: "currentFrame"
pingPong: false
duration: 300
from: 0
loops: 1
to: 1000
//alwaysRunToEnd: true
running: false
onFinished: root.state = "open"
},
TimelineAnimation {
id: timelineAnimation2
property: "currentFrame"
pingPong: false
duration: 700
from: 1000
loops: 1
to: 0
//alwaysRunToEnd: true
running: false
onFinished: root.state = "closed"
}
]
endFrame: 1000
startFrame: 0
KeyframeGroup {
target: imageOutline
property: "x"
Keyframe {
easing.bezierCurve: [0.337, 0.229, 0.758, 0.282, 1, 1]
frame: 1000
value: 0
}
Keyframe {
frame: 1
value: -348
}
}
KeyframeGroup {
target: imageBackground
property: "x"
Keyframe {
frame: 402
value: -423
}
Keyframe {
frame: 0
value: -424
}
Keyframe {
easing.bezierCurve: [0.337, 0.229, 0.758, 0.282, 1, 1]
frame: 1000
value: 0
}
}
}
Connections {
target: burger_menu
onClicked: {
root.state = "opening"
}
enabled: root.state === "closed"
}
Connections {
target: burger_menu
onClicked: {
root.state = "closing"
}
enabled: root.state === "open"
}
states: [
State {
name: "opening"
PropertyChanges {
target: timelineAnimation
running: true
}
PropertyChanges {
target: burger_menu
enabled: false
}
PropertyChanges {
target: slidermenu
visible: false
}
},
State {
name: "open"
},
State {
name: "closing"
PropertyChanges {
target: timelineAnimation2
running: true
}
PropertyChanges {
target: burger_menu
enabled: false
}
},
State {
name: "closed"
PropertyChanges {
target: slidermenu
visible: false
}
}
]
}
|
