1 files changed, 55 insertions, 0 deletions
diff --git a/examples/declarative/follow/pong.qml b/examples/declarative/follow/pong.qml
new file mode 100644
index 0000000..4fbf323
--- /dev/null
+++ b/examples/declarative/follow/pong.qml
@@ -0,0 +1,55 @@
+<Rect id="Page" width="640" height="480" color="#000000">
+    <!-- Make a ball to bounce -->
+    <Rect id="Ball" x="20" width="20" height="20" color="#00ee00" z="1">
+        <properties>
+            <!-- Add a property for the target y coordinate -->
+            <Property name="targetY" value="{Page.height-10}"/>
+            <Property name="direction" value="right"/>
+        </properties>
+        <x>
+            <!-- Move the ball to the right and back to the left repeatedly -->
+            <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"/>
+            </SequentialAnimation>
+        </x>
+        <y>
+            <!-- Make y follow the target y coordinate, with a velocity of 200 -->
+            <Follow source="{Ball.targetY}" velocity="200"/>
+        </y>
+        <onTopChanged>
+            <!-- Detect the ball hitting the top or bottom of the view and bounce it -->
+            if (y &lt;= 0)
+                targetY = Page.height-20;
+            else if (y &gt;= Page.height-20)
+                targetY = 0;
+        </onTopChanged>
+    </Rect>
+    <!--
+    Place bats to the left and right of the view, following the y
+    coordinates of the ball.
+    -->
+    <Rect id="LeftBat" color="#00ee00" x="2" width="20" height="90">
+        <y>
+            <Follow source="{Ball.y-45}" velocity="300" enabled="{Ball.direction == 'left'}"/>
+        </y>
+    </Rect>
+    <Rect id="RightBat" x="{Page.width-22}" color="#00ee00" width="20" height="90">
+        <y>
+            <Follow source="{Ball.y-45}" velocity="300" enabled="{Ball.direction == 'right'}"/>
+        </y>
+    </Rect>
+
+    <!--
+    The rest, to make it look realistic, if neither ever scores...
+    -->
+    <Rect color="#00ee00" width="40" height="60" x="{320-80}"/>
+    <Rect color="#000000" width="20" height="40"  x="{320-70}" y="10"/>
+    <Rect color="#00ee00" width="40" height="60" x="{320+40}"/>
+    <Rect color="#000000" width="20" height="40"  x="{320+50}" y="10"/>
+    <Repeater dataSource="{24}">
+        <Rect color="#00ee00" width="10" height="10" x="{320-5}" y="{index*20}"/>
+    </Repeater>
+</Rect>