Created
November 16, 2014 23:07
-
-
Save cyberbobs/8d62ab257d332914a72c to your computer and use it in GitHub Desktop.
Animated hamburger-back icon in Material Design style done in QML
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import QtQuick 2.2 | |
Rectangle { | |
width: 48 | |
height: 48 | |
color: "#9c27b0" | |
MouseArea { | |
anchors.fill: parent | |
onClicked: menuBackIcon.state = menuBackIcon.state === "menu" ? "back" : "menu" | |
} | |
MenuBackIcon { | |
id: menuBackIcon | |
anchors.centerIn: parent | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import QmlProject 1.1 | |
Project { | |
mainFile: "hamburger-icon.qml" | |
/* Include .qml, .js, and image files from current directory and subdirectories */ | |
QmlFiles { | |
directory: "." | |
} | |
} |
Отлично! Полезно! Спасибо.
Very cool!
If you want relative sizes use this snippet:
import QtQuick 2.5
Item {
id: mainRect
property real radius: 3
Rectangle {
id: bar1
x: 0
y: parent.height * .25
width: parent.width
height: parent.height * .15
radius: parent.radius
antialiasing: true
}
Rectangle {
id: bar2
x: 0
y: parent.height * .5
width: parent.width
height: parent.height * .15
radius: parent.radius
antialiasing: true
}
Rectangle {
id: bar3
x: 0
y: parent.height * .75
width: parent.width
height: parent.height * .15
radius: parent.radius
antialiasing: true
}
property int animationDuration: 350
state: "menu"
states: [
State {
name: "menu"
},
State {
name: "back"
PropertyChanges { target: mainRect; rotation: 180 }
PropertyChanges { target: bar1; rotation: 45; width: mainRect.width * .6; x: mainRect.width * .48; y: mainRect.height * .33 - bar1.height }
PropertyChanges { target: bar2; width: mainRect.width * .8; x: mainRect.width * .2; y: mainRect.height * .5 - bar2.height }
PropertyChanges { target: bar3; rotation: -45; width: mainRect.width * .6; x: mainRect.width * .48; y: mainRect.height * .67 - bar3.height }
}
]
transitions: [
Transition {
RotationAnimation { target: mainRect; 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 }
}
]
}
Dude ! you rock. Thanks
Beautiful. Thank you!
Thanks a lot.
this gives better centering
import QtQuick 2.9
Item {
id: root
property alias barsColor:root.bcolor
property color bcolor: "black"
property real xValue: (root.width-20)/2
property real yValue: (root.height-10)/2
Rectangle {
id: bar1
color: bcolor
x: xValue
y: yValue
width: 20
height: 2
antialiasing: true
}
Rectangle {
id: bar2
color: "blue"
x: xValue
y: yValue+5
width: 20
height: 2
antialiasing: true
}
Rectangle {
id: bar3
color: "orange"
x: xValue
y: yValue+10
width: 20
height: 2
antialiasing: true
}
property int animationDuration: 500
state: "menu"
states: [
State {
name: "menu"
},
State {
name: "back"
PropertyChanges { target: root; rotation: 180 }
PropertyChanges { target: bar1; rotation: 45; width: 13; x: xValue+7.5; y: yValue+3 }
PropertyChanges { target: bar2; width: 17; x: xValue+1; y: yValue+7 }
PropertyChanges { target: bar3; rotation: -45; width: 13; x: xValue+7.5; y: yValue+11 }
}
]
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 }
}
]
}
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Wonderful!