Animated hamburger-back icon in Material Design style done in QML

hamburger-icon.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
  }
}

hamburger-icon.qmlproject

import QmlProject 1.1

Project {
  mainFile: "hamburger-icon.qml"

  /* Include .qml, .js, and image files from current directory and subdirectories */
  QmlFiles {
    directory: "."
  }
}

MenuBackIcon.qml

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

Wonderful!

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

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