diff options
| -rw-r--r-- | examples/declarative/follow/follow.qml | 66 | ||||
| -rw-r--r-- | examples/declarative/follow/pong.qml | 102 |
2 files changed, 36 insertions, 132 deletions
diff --git a/examples/declarative/follow/follow.qml b/examples/declarative/follow/follow.qml index 598d953..5368e75 100644 --- a/examples/declarative/follow/follow.qml +++ b/examples/declarative/follow/follow.qml @@ -1,78 +1,46 @@ Rect { - width: 320 - height: 240 color: "#ffffff" + width: 320; height: 240 Rect { id: Rect - y: 200 color: "#00ff00" - width: 60 - height: 20 + y: 200; width: 60; height: 20 y: SequentialAnimation { - running: true - repeat: true + running: true; repeat: true NumericAnimation { - to: 200 + to: 200; duration: 2000 easing: "easeOutBounce(amplitude:180)" - duration: 2000 - } - PauseAnimation { - duration: 1000 } + PauseAnimation { duration: 1000 } } } + // Velocity Rect { - x: Rect.width color: "#ff0000" - width: Rect.width - height: 20 - y: Follow { - source: Rect.y - velocity: 200 - } - } - Text { - x: Rect.width - y: 220 - text: "Velocity" + x: Rect.width; width: Rect.width; height: 20 + y: Follow { source: Rect.y; velocity: 200 } } + Text { x: Rect.width; y: 220; text: "Velocity" } + // Spring Rect { - x: Rect.width * 2 color: "#ff0000" - width: Rect.width - height: 20 - y: Follow { - source: Rect.y - spring: 1.2 - damping: 0.1 - } - } - Text { - x: Rect.width * 2 - y: 220 - text: "Spring" + x: Rect.width * 2; width: Rect.width; height: 20 + y: Follow { source: Rect.y; spring: 1.2; damping: 0.1 } } + Text { x: Rect.width * 2; y: 220; text: "Spring" } + // Follow mouse MouseRegion { id: Mouse anchors.fill: parent Rect { - width: 20 - height: 20 + width: 20; height: 20 radius: 10 color: "#0000ff" - x: Follow { - source: Mouse.mouseX-10 - spring: 1.0 - damping: 0.05 - } - y: Follow { - source: Mouse.mouseY-10 - spring: 1.0 - damping: 0.05 - } + x: Follow { source: Mouse.mouseX-10; spring: 1.0; damping: 0.05 } + y: Follow { source: Mouse.mouseY-10; spring: 1.0; damping: 0.05 } } } } diff --git a/examples/declarative/follow/pong.qml b/examples/declarative/follow/pong.qml index b6695bd..32ee049 100644 --- a/examples/declarative/follow/pong.qml +++ b/examples/declarative/follow/pong.qml @@ -1,57 +1,29 @@ Rect { id: Page - width: 640 - height: 480 + width: 640; height: 480 color: "#000000" // Make a ball to bounce Rect { id: Ball - x: 20 - width: 20 - height: 20 color: "#00ee00" - z: 1 + x: 20; width: 20; height: 20; z: 1 // Add a property for the target y coordinate - properties: Property { - name: "targetY" - value: Page.height-10 - } - properties: Property { - name: "direction" - value: "right" - } + properties: Property { name: "targetY"; value: Page.height-10 } + properties: Property { name: "direction"; value: "right" } // Move the ball to the right and back to the left repeatedly x: SequentialAnimation { - running: true - repeat: true - NumericAnimation { - to: Page.width-40 - duration: 2000 - } - SetPropertyAction { - target: Ball - property: "direction" - value: "left" - } - NumericAnimation { - to: 20 - duration: 2000 - } - SetPropertyAction { - target: Ball - property: "direction" - value: "right" - } + running: true; repeat: true + NumericAnimation { to: Page.width-40; duration: 2000 } + SetPropertyAction { target: Ball; property: "direction"; value: "left" } + NumericAnimation { to: 20; duration: 2000 } + SetPropertyAction { target: Ball; property: "direction"; value: "right" } } // Make y follow the target y coordinate, with a velocity of 200 - y: Follow { - source: Ball.targetY - velocity: 200 - } + y: Follow { source: Ball.targetY; velocity: 200 } // Detect the ball hitting the top or bottom of the view and bounce it onTopChanged: { @@ -67,65 +39,29 @@ Rect { Rect { id: LeftBat color: "#00ee00" - x: 2 - width: 20 - height: 90 + x: 2; width: 20; height: 90 y: Follow { - source: Ball.y-45 - velocity: 300 + source: Ball.y-45; velocity: 300 enabled: Ball.direction == 'left' } } Rect { id: RightBat - x: Page.width-22 color: "#00ee00" - width: 20 - height: 90 + x: Page.width-22; width: 20; height: 90 y: Follow { - source: Ball.y-45 - velocity: 300 + source: Ball.y-45; velocity: 300 enabled: Ball.direction == 'right' } } // The rest, to make it look realistic, if neither ever scores... - Rect { - color: "#00ee00" - x: 320-80 - y: 0 - width: 40 - height: 60 - } - Rect { - color: "#000000" - x: 320-70 - y: 10 - width: 20 - height: 40 - } - Rect { - color: "#00ee00" - x: 320+40 - y: 0 - width: 40 - height: 60 - } - Rect { - color: "#000000" - x: 320+50 - y: 10 - width: 20 - height: 40 - } + Rect { color: "#00ee00"; x: 320-80; y: 0; width: 40; height: 60 } + Rect { color: "#000000"; x: 320-70; y: 10; width: 20; height: 40 } + Rect { color: "#00ee00"; x: 320+40; y: 0; width: 40; height: 60 } + Rect { color: "#000000"; x: 320+50; y: 10; width: 20; height: 40 } Repeater { dataSource: 24 - Rect { - color: "#00ee00" - x: 320-5 - y: index*20 - width: 10 - height: 10 - } + Rect { color: "#00ee00"; x: 320-5; y: index*20; width: 10; height: 10 } } } |