====== Making things move ======

===== States =====
  * 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.
{{youtube>hO18NDpekp0?small}}

==== How to create States ====
  * Bind ''states'' to a list of States.
    * The list is specified using JSON array syntax.
<code javascript>
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
      }
    }
  ]
}</code>
  * 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.
<code javascript>
...
  states: [
    State {
      name: "leftXMove"
      PropertyChanges {
        target: "spaceship"
        x: 200
    }
  },
    State {
      name: "downYMove"
      PropertyChanges {
        target: "spaceship"
        y: 90
      }
    }
  ]
...</code>
  * Executing a function to set a different state:
<code javascript>
Image {
  id: myButton
  source: "images/button.png"
  y: 50; x: 10

  MouseArea {
    anchors.fill: parent
    onClicked: myItem.state = 'leftXMove'
  }
}</code>
    * Using “when” method. It will change the property but inside the state element:
<code javascript>
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
    }
  }
]</code>

  * Complete example:
<file javascript 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
             }
         }
    ]
}</file>

===== Transitions =====
  * State changes add dynamics, but Transitions make them pretty.
{{youtube>Q2E3mjlcvEk?small}}

==== Animating from one State to another ====
  * You just need to add a transition element to animate between states.
  * The first state is an empty string by default.
<file javascript 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
             }
         }
    ]
}
</file>

=== Main transition and animation elements ===
  * ''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

==== Animation types ====
  * There are many ways to achieve your needs.

=== NumberAnimation ===
  * **NumberAnimation** allows you to animate changes in a real number type property.
  * This is the basic animation element. Most animations are about changing numbers.
<code javascript>
NumberAnimation {
  properties: "x, y";
  duration: 500;
  easing.type: Easing.OutExpo;
}
</code>

=== Sequential and Parallel Animations ===
  * You can create collections of animations that happen in a specific order.
    * **SequentialAnimation**:
{{youtube>sFVifXy8mAM?small}}
<code javascript>
SequentialAnimation { 
  NumberAnimation { 
    target : myRect 
    properties: "x"; 
    duration: 500; 
    easing.type: Easing.OutExpo; 
  } 

  NumberAnimation { 
    target : myRect 
    properties: "y"; 
    duration: 500; 
    easing.type: Easing.OutExpo; 
  } 
}</code>
    * **ParallelAnimation**
{{youtube>A-TOPzJpRYg?small}}
<code javascript>
ParallelAnimation { 
  NumberAnimation { 
    target : myRect 
    properties: "x"; 
    duration: 500; 
    easing.type: Easing.OutExpo; 
  } 

  NumberAnimation { 
    target : myRect 
    properties: "y"; 
    duration: 500; 
    easing.type: Easing.OutExpo; 
  } 
}</code>

=== RotationAnimation ===
  * The **RotationAnimation** allows you to add rotation properties to your animation. FIXME I think the code below is wrong: state and transition are not JSON arrays
<code javascript>
states: {
  State {
    name: "180";
    PropertyChanges { target: myItem; rotation: 180 }
  }
  State {
    name: "-90";
    PropertyChanges { target: myItem; rotation: -90 }
  }
}

transition: Transition {
  RotationAnimation {
    direction: RotationAnimation.Shortest
  }
}
</code>

=== PauseAnimation ===
  * The **PauseAnimation** allows you to add delays in your animation.
<code javascript>
PauseAnimation {
  target : myRect
  duration: 100
}</code>

=== Animating with behavior ===
<code javascript>
Rectangle {
  width: 20; height: 20; color: "#00ff00"
  y: 200
  Behavior on y {
    NumberAnimation {
    easing.type: Easing.OutBounce
    duration: 200
  }
}
</code>

--------------------------------------------------------------
====== Resources ======
  * {{:qt-quick-for-designers-1:images.zip|}}
  * All source code is subject to this [[copyright header|copyright]].