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?

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.1371860314.txt.gz · Last modified: 2013/06/22 00:18 by mithat

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki