User Tools

Site Tools


qt-quick-for-designers-1:making_things_move

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.

How to create States

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

Transitions

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

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

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.
NumberAnimation {
  properties: "x, y";
  duration: 500;
  easing.type: Easing.OutExpo;
}

Sequential and Parallel Animations

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

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
states: {
  State {
    name: "180";
    PropertyChanges { target: myItem; rotation: 180 }
  }
  State {
    name: "-90";
    PropertyChanges { target: myItem; rotation: -90 }
  }
}
 
transition: Transition {
  RotationAnimation {
    direction: RotationAnimation.Shortest
  }
}

PauseAnimation

  • The PauseAnimation allows you to add delays in your animation.
PauseAnimation {
  target : myRect
  duration: 100
}

Animating with behavior

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

Resources

qt-quick-for-designers-1/making_things_move.txt · Last modified: 2013/07/06 22:52 by mithat