Skip to content

Instantly share code, notes, and snippets.

@cyberbobs
Created November 16, 2014 23:07
Show Gist options
  • Save cyberbobs/8d62ab257d332914a72c to your computer and use it in GitHub Desktop.
Save cyberbobs/8d62ab257d332914a72c 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 }
}
]
}
@jniemann66
Copy link

Dude ! you rock. Thanks

@grodriguez216
Copy link

Beautiful. Thank you!

@geiziry
Copy link

geiziry commented Feb 14, 2018

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