qt-quick-for-designers-1:making_things_move
This is an old revision of the document!
Table of Contents
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.
- 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
andto
- 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.1371865959.txt.gz · Last modified: 2013/06/22 01:52 by mithat