summaryrefslogtreecommitdiffstats
path: root/examples/declarative/states/transitions.qml
diff options
context:
space:
mode:
authorMartin Jones <martin.jones@nokia.com>2009-05-11 07:49:26 (GMT)
committerMartin Jones <martin.jones@nokia.com>2009-05-11 07:49:26 (GMT)
commit415da7f2969bad2765fe535daf9322c7a538da81 (patch)
tree9f5c69acd4cfa532d8f5136fb60e6b9f0b55e8b3 /examples/declarative/states/transitions.qml
parentb3526f5edf6425289ef2aa5c8adfc89892817ac0 (diff)
downloadQt-415da7f2969bad2765fe535daf9322c7a538da81.zip
Qt-415da7f2969bad2765fe535daf9322c7a538da81.tar.gz
Qt-415da7f2969bad2765fe535daf9322c7a538da81.tar.bz2
Join some lines in examples.
Diffstat (limited to 'examples/declarative/states/transitions.qml')
-rw-r--r--examples/declarative/states/transitions.qml105
1 files changed, 27 insertions, 78 deletions
diff --git a/examples/declarative/states/transitions.qml b/examples/declarative/states/transitions.qml
index c7fc656..4c1dceb 100644
--- a/examples/declarative/states/transitions.qml
+++ b/examples/declarative/states/transitions.qml
@@ -1,111 +1,60 @@
Rect {
id: Page
- width: 300
- height: 300
- color: "white"
+ 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='' }
- }
+ x: 0; y: 0; width: 50; height: 50
+ 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' }
- }
+ x: 150; y: 50; width: 50; height: 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' }
- }
+ x: 0; y: 200; width: 50; height: 50
+ 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"
- }
+ 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 -
+ 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
- }
+ 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,
+ 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.
-,
+ 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
- }
+ NumericAnimation { properties: "x,y"; duration: 200 }
}
]
}