Skip to content

Instantly share code, notes, and snippets.

@trusktr
Forked from cyberbobs/MenuBackIcon.qml
Created October 26, 2015 22:29
Show Gist options
  • Save trusktr/660786eb9f1927aef954 to your computer and use it in GitHub Desktop.
Save trusktr/660786eb9f1927aef954 to your computer and use it in GitHub Desktop.
Animated hamburger-back icon in Material Design style done in QML
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
}
}
import QmlProject 1.1
Project {
mainFile: "hamburger-icon.qml"
/* Include .qml, .js, and image files from current directory and subdirectories */
QmlFiles {
directory: "."
}
}
import QtQuick 2.2
Item {
id: root
width: 24
height: 24
Rectangle {
id: bar1
x: 2
y: 5
width: 20
height: 2
antialiasing: true
}
Rectangle {
id: bar2
x: 2
y: 10
width: 20
height: 2
antialiasing: true
}
Rectangle {
id: bar3
x: 2
y: 15
width: 20
height: 2
antialiasing: true
}
property int animationDuration: 350
state: "menu"
states: [
State {
name: "menu"
},
State {
name: "back"
PropertyChanges { target: root; rotation: 180 }
PropertyChanges { target: bar1; rotation: 45; width: 13; x: 9.5; y: 8 }
PropertyChanges { target: bar2; width: 17; x: 3; y: 12 }
PropertyChanges { target: bar3; rotation: -45; width: 13; x: 9.5; y: 16 }
}
]
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