• The State element defines configurations of objects and properties.
• It is a non-visual element (typically) has visual impact.
• Changing from one state to another creates dynamics.

• Bind states to a list of States.
  • The 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
      }
    }
  ]
...

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

• Complete example:

state-example.qml

import QtQuick 1.0
 
Item {
    id: myItem
    width: 400
    height: 400
 
    Image {
        source: "images/background.png"
    }
 
    Image {
        id: spaceship
        x: 10
        y: 50
        source: "images/spaceship.png"
    }
 
    Image {
        id: myButton
        source: "images/button.png"
        anchors.horizontalCenter: myItem.horizontalCenter
        anchors.bottom: myItem.bottom
        anchors.bottomMargin: 20
 
        Text {
            id: myButtonLabel
            text: "PRESS"
            color: "white"
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.top: parent.top
            anchors.topMargin: 6
        }
 
        MouseArea {
           anchors.fill: parent
           onClicked:{
               myItem.state = "rightBottom"
           }
       }
 
    }
 
   states: [
         State {
             name: "rightBottom"
             PropertyChanges {
                 target: spaceship
                 x: 250
                 y: 200
             }
         }
    ]
}

• State changes add dynamics, but Transitions make them pretty.

• You just need to add a transition element to animate between states.
• The first state is an empty string by default.

animation-example.qml

import QtQuick 1.0
 
Item {
    id: myItem
    width: 400
    height: 400
 
    Image {
        source: "images/background.png"
    }
 
    Image {
        id: spaceship
        x: 10
        y: 50
        source: "images/spaceship.png"
    }
 
    Image {
        id: myButton
        source: "images/button.png"
        anchors.horizontalCenter: myItem.horizontalCenter
        anchors.bottom: myItem.bottom
        anchors.bottomMargin: 20
 
        Text {
            id: myButtonLabel
            text: "PRESS"
            color: "white"
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.top: parent.top
            anchors.topMargin: 6
        }
 
        MouseArea {
           anchors.fill: parent
           onClicked:{
               myItem.state = "rightBottom"
           }
       }
 
    }
 
   states: [
         State {
             name: "rightBottom"
             PropertyChanges {
                 target: spaceship
                 x: 250
                 y: 200
             }
         }
    ]
 
    transitions: [
         Transition {
             from: ""
             to: "rightBottom"
             NumberAnimation {
                 properties: "x,y"
                 duration: 500
                 easing.type: Easing.OutExpo
             }
         }
    ]
}

• 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

• There are many ways to achieve your needs.

• NumberAnimation allows you to animate changes in a real number type property.
• This is the basic animation element. Most animations are about changing numbers.

NumberAnimation {
  properties: "x, y";
  duration: 500;
  easing.type: Easing.OutExpo;
}

• You can create collections of animations that happen in a specific order.
  • SequentialAnimation:

SequentialAnimation { 
  NumberAnimation { 
    target : myRect 
    properties: "x"; 
    duration: 500; 
    easing.type: Easing.OutExpo; 
  } 
 
  NumberAnimation { 
    target : myRect 
    properties: "y"; 
    duration: 500; 
    easing.type: Easing.OutExpo; 
  } 
}

• ParallelAnimation

ParallelAnimation { 
  NumberAnimation { 
    target : myRect 
    properties: "x"; 
    duration: 500; 
    easing.type: Easing.OutExpo; 
  } 
 
  NumberAnimation { 
    target : myRect 
    properties: "y"; 
    duration: 500; 
    easing.type: Easing.OutExpo; 
  } 
}

• The RotationAnimation allows you to add rotation properties to your animation. I think the code below is wrong: state and transition are not JSON arrays

states: {
  State {
    name: "180";
    PropertyChanges { target: myItem; rotation: 180 }
  }
  State {
    name: "-90";
    PropertyChanges { target: myItem; rotation: -90 }
  }
}
 
transition: Transition {
  RotationAnimation {
    direction: RotationAnimation.Shortest
  }
}

• The PauseAnimation allows you to add delays in your animation.

PauseAnimation {
  target : myRect
  duration: 100
}

Rectangle {
  width: 20; height: 20; color: "#00ff00"
  y: 200
  Behavior on y {
    NumberAnimation {
    easing.type: Easing.OutBounce
    duration: 200
  }
}

• images.zip
• All source code is subject to this copyright.