summaryrefslogtreecommitdiffstats
path: root/examples/declarative/states/transitions.qml
diff options
context:
space:
mode:
authorRoberto Raggi <roberto.raggi@nokia.com>2009-04-27 10:32:25 (GMT)
committerRoberto Raggi <roberto.raggi@nokia.com>2009-04-27 10:32:25 (GMT)
commite793ab29e651a7b07354224a82343d66c265f361 (patch)
tree066b8f7207132bfbd1f9fe039c723ccd75c78412 /examples/declarative/states/transitions.qml
parent40983ad8b9209c41124c93b8a3c1517f93ae17d2 (diff)
downloadQt-e793ab29e651a7b07354224a82343d66c265f361.zip
Qt-e793ab29e651a7b07354224a82343d66c265f361.tar.gz
Qt-e793ab29e651a7b07354224a82343d66c265f361.tar.bz2
Converted the examples.
Diffstat (limited to 'examples/declarative/states/transitions.qml')
-rw-r--r--examples/declarative/states/transitions.qml179
1 files changed, 111 insertions, 68 deletions
diff --git a/examples/declarative/states/transitions.qml b/examples/declarative/states/transitions.qml
index c3f3515..c7fc656 100644
--- a/examples/declarative/states/transitions.qml
+++ b/examples/declarative/states/transitions.qml
@@ -1,68 +1,111 @@
-<Rect id="Page" width="300" height="300" color="white">
-
- <!-- A target region. Clicking in here sets the state to '' - the default state -->
- <Rect width="50" height="50" x="0" y="0" color="transparent" pen.color="black">
- <MouseRegion anchors.fill="{parent}" onClicked="Page.state=''"/>
- </Rect>
-
- <!-- Another target region. Clicking in here sets the state to 'Position1' -->
- <Rect width="50" height="50" x="150" y="50" color="transparent" pen.color="black">
- <MouseRegion anchors.fill="{parent}" onClicked="Page.state='Position1'"/>
- </Rect>
-
- <!-- Another target region. Clicking in here sets the state to 'Position2' -->
- <Rect width="50" height="50" x="0" y="200" color="transparent" pen.color="black">
- <MouseRegion anchors.fill="{parent}" onClicked="Page.state='Position2'"/>
- </Rect>
-
- <!-- Rect which will be moved when my state changes -->
- <Rect id="myrect" width="50" height="50" color="red"/>
-
- <states>
-
- <!-- In state 'Position1', change the 'myrect' item x, y to 150, 50. -->
- <State name="Position1">
- <SetProperty target="{myrect}" property="x" value="150"/>
- <SetProperty target="{myrect}" property="y" value="50"/>
- </State>
-
- <!--
- In state 'Position2', change y to 100. We do not specify 'x' here -
- it will therefore be restored to its default value of 0, if it
- had been changed.
- -->
- <State name="Position2">
- <SetProperty target="{myrect}" property="y" value="200"/>
- </State>
-
- </states>
-
- <!-- transitions define how the properties change. -->
- <transitions>
-
- <!--
- When transitioning to 'Position1' move x,y over a duration of 1 second,
- with easeOutBounce easing function.
- -->
- <Transition fromState="*" toState="Position1">
- <NumericAnimation properties="x,y" easing="easeOutBounce" duration="1000" />
- </Transition>
-
- <!--
- When transitioning to 'Position2' move x,y over a duration of 2 seconds,
- with easeInOutQuad easing function.
- -->
- <Transition fromState="*" toState="Position2">
- <NumericAnimation properties="x,y" easing="easeInOutQuad" duration="2000" />
- </Transition>
-
- <!--
- For any other state changes move x,y linearly over duration of 200ms.
- -->
- <Transition>
- <NumericAnimation properties="x,y" duration="200" />
- </Transition>
-
- </transitions>
-
-</Rect>
+Rect {
+ id: Page
+ width: 300
+ height: 300
+ color: "white"
+ // A target region. Clicking in here sets the state to '' - the default state
+ Rect {
+ width: 50
+ height: 50
+ x: 0
+ y: 0
+ color: "transparent"
+ pen.color: "black"
+ MouseRegion {
+ anchors.fill: parent
+ onClicked: { Page.state='' }
+ }
+ }
+ // Another target region. Clicking in here sets the state to 'Position1'
+ Rect {
+ width: 50
+ height: 50
+ x: 150
+ y: 50
+ color: "transparent"
+ pen.color: "black"
+ MouseRegion {
+ anchors.fill: parent
+ onClicked: { Page.state='Position1' }
+ }
+ }
+ // Another target region. Clicking in here sets the state to 'Position2'
+ Rect {
+ width: 50
+ height: 50
+ x: 0
+ y: 200
+ color: "transparent"
+ pen.color: "black"
+ MouseRegion {
+ anchors.fill: parent
+ onClicked: { Page.state='Position2' }
+ }
+ }
+ // Rect which will be moved when my state changes
+ Rect {
+ id: myrect
+ width: 50
+ height: 50
+ color: "red"
+ }
+ states: [
+ // In state 'Position1', change the 'myrect' item x, y to 150, 50.
+ State {
+ name: "Position1"
+ SetProperty {
+ target: myrect
+ property: "x"
+ value: 150
+ }
+ SetProperty {
+ target: myrect
+ property: "y"
+ value: 50
+ }
+ } // In state 'Position2', change y to 100. We do not specify 'x' here -
+ // it will therefore be restored to its default value of 0, if it
+ // had been changed.
+,
+ State {
+ name: "Position2"
+ SetProperty {
+ target: myrect
+ property: "y"
+ value: 200
+ }
+ }
+ ]
+ // transitions define how the properties change.
+ transitions: [
+ // When transitioning to 'Position1' move x,y over a duration of 1 second,
+ // with easeOutBounce easing function.
+ Transition {
+ fromState: "*"
+ toState: "Position1"
+ NumericAnimation {
+ properties: "x,y"
+ easing: "easeOutBounce"
+ duration: 1000
+ }
+ } // When transitioning to 'Position2' move x,y over a duration of 2 seconds,
+ // with easeInOutQuad easing function.
+,
+ Transition {
+ fromState: "*"
+ toState: "Position2"
+ NumericAnimation {
+ properties: "x,y"
+ easing: "easeInOutQuad"
+ duration: 2000
+ }
+ } // For any other state changes move x,y linearly over duration of 200ms.
+,
+ Transition {
+ NumericAnimation {
+ properties: "x,y"
+ duration: 200
+ }
+ }
+ ]
+}