• The State element defines configurations of objects and properties.
• It is a non-visual element.

• Bind states to a list of States.
• List is specified using JSON array syntax.

Item {
  id: myItem
  width: 400
  height: 400
 
  Image {
    id: spaceship
    source: "images/spaceship.png"
    x: 10
    y: 50
  }
 
  states: [
    State {
      name: "leftXMove"
      PropertyChanges {
        target: spaceship
        x: 200
      }
    }
  ]
}

• States have names (in quotes), not ids.
• You can create as many states as you need for an object.
  • All properties not expressed will be the same as the base state.

...
  states: [
    State {
      name: "leftXMove"
      PropertyChanges {
        target: "spaceship"
        x: 200
    }
  },
    State {
      name: "downYMove"
      PropertyChanges {
        target: "spaceship"
        y: 90
      }
    }
  ]
...

• Changing from one state to another creates dynamics.
  • Executing a function to set a different state:

Image {
  id: myButton
  source: "images/button.png"
  y: 50; x: 10
 
  MouseArea {
    anchors.fill: parent
    onClicked: myItem.state = 'leftXMove'
  }
}

• Using “when” method. It will change the property but inside the state element:

Image {
  id: myButton
  source: "images/button.png"
  y: 50; x: 10
  MouseArea {
    id:myButtonMouseArea
    anchors.fill: parent
  }
}
 
states: [
  State {
    name: "leftXMove"
    when: myButtonMouseArea.clicked
    PropertyChanges {
      target: myItem
      x: 200
    }
  }
]

• from and to
  • the element’s initial and final state string
• target
  • the animated element’s id
• properties
  • the property that you want to change during the animation. This can be an array of properties
• easing.type
  • choose an easing curve to add a specific effect to your animation