|
|
@@ -0,0 +1,69 @@
|
|
|
+import QtQuick 2.0
|
|
|
+
|
|
|
+Item {
|
|
|
+ id: root
|
|
|
+ signal clicked()
|
|
|
+ signal back()
|
|
|
+
|
|
|
+ MouseArea {
|
|
|
+ id: ma
|
|
|
+
|
|
|
+ anchors.fill: parent
|
|
|
+ anchors.margins: -8
|
|
|
+ }
|
|
|
+
|
|
|
+ Rectangle {
|
|
|
+ id: bar1
|
|
|
+ x: 0
|
|
|
+ y: root.height / 6
|
|
|
+ width: root.height
|
|
|
+ height: root.height / 9
|
|
|
+ antialiasing: true
|
|
|
+ }
|
|
|
+
|
|
|
+ Rectangle {
|
|
|
+ id: bar2
|
|
|
+ x: 0
|
|
|
+ y: root.height / 2 - height / 2
|
|
|
+ width: root.height
|
|
|
+ height: root.height / 9
|
|
|
+ antialiasing: true
|
|
|
+ }
|
|
|
+
|
|
|
+ Rectangle {
|
|
|
+ id: bar3
|
|
|
+ x: 0
|
|
|
+ y: root.height / 2 + height * 2
|
|
|
+ width: root.height
|
|
|
+ height: root.height / 9
|
|
|
+ antialiasing: true
|
|
|
+ }
|
|
|
+
|
|
|
+ property int animationDuration: 450
|
|
|
+
|
|
|
+ state: "menu"
|
|
|
+ states: [
|
|
|
+ State {
|
|
|
+ name: "menu"
|
|
|
+ PropertyChanges { target: ma; onClicked: root.clicked() }
|
|
|
+ },
|
|
|
+
|
|
|
+ State {
|
|
|
+ name: "back"
|
|
|
+ PropertyChanges { target: root; rotation: 180 }
|
|
|
+ PropertyChanges { target: bar1; rotation: 45; width: root.height / 3 * 2; x: root.height / 2; y: root.height / 4 }
|
|
|
+ PropertyChanges { target: bar2; width: root.height / 6 * 5 + 1; x: root.height / 9 }
|
|
|
+ PropertyChanges { target: bar3; rotation: -45; width: root.height / 3 * 2; x: root.height / 2; y: root.height / 3 * 2 }
|
|
|
+ PropertyChanges { target: ma; onClicked: root.back() }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+
|
|
|
+ transitions: [
|
|
|
+ Transition {
|
|
|
+ RotationAnimation { target: root; direction: RotationAnimation.Clockwise; duration: animationDuration; easing.type: Easing.InOutQuad }
|
|
|
+ PropertyAnimation { target: bar1; properties: "rotation, width, x, y"; duration: animationDuration; easing.type: Easing.InOutQuad }
|
|
|
+ PropertyAnimation { target: bar2; properties: "rotation, width, x, y"; duration: animationDuration; easing.type: Easing.InOutQuad }
|
|
|
+ PropertyAnimation { target: bar3; properties: "rotation, width, x, y"; duration: animationDuration; easing.type: Easing.InOutQuad }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+}
|