Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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 }
}
]
}
@nomelif

This comment has been minimized.

Copy link

@nomelif nomelif commented Jan 4, 2015

Wonderful!

@overlapped

This comment has been minimized.

Copy link

@overlapped overlapped commented Oct 9, 2015

Отлично! Полезно! Спасибо.

@andresilvasantos

This comment has been minimized.

Copy link

@andresilvasantos andresilvasantos commented Aug 1, 2016

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 }
    }
  ]
}
@jniemann66

This comment has been minimized.

Copy link

@jniemann66 jniemann66 commented Jul 24, 2017

Dude ! you rock. Thanks

@grodriguez216

This comment has been minimized.

Copy link

@grodriguez216 grodriguez216 commented Nov 29, 2017

Beautiful. Thank you!

@geiziry

This comment has been minimized.

Copy link

@geiziry 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