User Tools

Site Tools


qt-quick-for-designers-1:making_things_move

This is an old revision of the document!


Making things move

States

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

How to create States

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

Why create States?

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

Transitions

Animating from one State to another

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

qt-quick-for-designers-1/making_things_move.1371860993.txt.gz · Last modified: 2013/06/22 00:29 by mithat

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki