QML States and Transitions

on August 22nd, 2011 by Wade Shull in Development - Mobile App - QML - Qt
| Share

]Coming from a non-programming background sometimes leads me to be intimidated just by the thought of something that appears to be complex. One of those ideas was transitions. QML has the ability to provide the programmer with a range of different transitions to allow their app to be very fancy/professional looking. Once I really sat down and saw what it took to do a transition I was amazed on how simple it really was.

There are two steps to making a transition happen. The first step is setting the states of the object in question. In this example I am going to show you how to make a rectangle move off the screen. So let’s go ahead and set the states right now. For the states what you are going to declare are the properties that will be changing during the transition.

Rectangle {
id: test
y: 0
state: "shown"
states [
State {
name: "shown"
PropertyChanges {
target: test
x: 0
}
}
State {
name: "hidden"
PropertyChanges {
target: test
x: 0-test.width
}
}
]
}

Ok so let’s look and see what we did here. We created a Rectangle with the ID of test and declared the y value of 0. We also the set the starting state as the shown state that we are just about to make. If you are going to make multiple states it needs to go – states [ State {} State {} ]. If you are only going to declare one state all you need is the State {}. Ok so now we made two different States named shown and hidden. The shown state has the x as 0 and declare this 0 to the target test, which is our rectangle. The hidden state puts the x as 0-test.width. What this does for us is makes the x value the width of screen but negative. In other words the very right of the rectangle will border the left side of the screen and won’t be seen at all. Now that we have the two positions that the Rectangle will be in we need tell the app what to do when it moves from one state to the other. For this we will need to make a transition.

transitions: Transition {
PropertyAnimation { properties: "x"; easing.type: easing.inoutquad }
}

This code should also go in the the Rectangle code. All this does is simply say, if the property of “x” changes do the easing.type of easing.inoutquad.  Now to tie this all together all you need is some sort of command to switch the states.  This is easily done with a OnClicked in a mouseArea.

onClicked: test.state="hidden"

That wraps it all up.  So now when the mouseArea is clicked the states are changed in the Rectangle test.  That only really changes the x value, but because we set a transition to go whenever the x value changes we have a nice sliding transition.  All the information I got was from here.  I just hope I explained it good enough for everyone to understand.

http://doc.qt.nokia.com/4.7-snapshot/qml-transition.html

Comments: 0 Tags:

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>