diff options
author | Martin Jones <martin.jones@nokia.com> | 2009-05-11 07:49:26 (GMT) |
---|---|---|
committer | Martin Jones <martin.jones@nokia.com> | 2009-05-11 07:49:26 (GMT) |
commit | 415da7f2969bad2765fe535daf9322c7a538da81 (patch) | |
tree | 9f5c69acd4cfa532d8f5136fb60e6b9f0b55e8b3 /examples/declarative/states/transitions.qml | |
parent | b3526f5edf6425289ef2aa5c8adfc89892817ac0 (diff) | |
download | Qt-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.qml | 105 |
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 } } ] } |