1 files changed, 55 insertions, 22 deletions
diff --git a/examples/quick/animation/behaviors/tvtennis.qml b/examples/quick/animation/behaviors/tvtennis.qml
index 0b8ba15ad7..4a55448ad7 100644
--- a/examples/quick/animation/behaviors/tvtennis.qml
+++ b/examples/quick/animation/behaviors/tvtennis.qml
@@ -8,30 +8,67 @@ Rectangle {
     width: 320; height: 480;
     color: "#1e1b18"
 
+    state: "right"
+    states: [
+        State {
+            name: "left"
+            PropertyChanges {
+                leftBat {
+                    y: (ball.y + ball.height / 2) - leftBat.height / 2
+                }
+                rightBat {
+                    y: page.height / 2 - rightBat.height / 2
+                }
+            }
+        },
+        State {
+            name: "right"
+            PropertyChanges {
+                rightBat {
+                    y: (ball.y + ball.height / 2) - rightBat.height / 2
+                }
+                leftBat {
+                    y: page.height / 2 - leftBat.height / 2
+                }
+            }
+        }
+    ]
+
+    transitions: [
+        Transition {
+            from: "left"; to: "right"
+            NumberAnimation { property: "y"; easing.type: Easing.InOutQuad; duration: 200}
+        },
+        Transition {
+            from: "right"; to: "left"
+            NumberAnimation { property: "y"; easing.type: Easing.InOutQuad; duration: 200}
+        }
+    ]
+
     // Make a ball to bounce
     Rectangle {
         id: ball
 
-        // Add a property for the target y coordinate
-        property variant direction : "right"
-
-        x: 20; width: 20; height: 20; z: 1
+        width: 20
+        height: 20
+        z: 1
         color: "#80c342"
 
         // Move the ball to the right and back to the left repeatedly
         SequentialAnimation on x {
             loops: Animation.Infinite
             NumberAnimation { to: page.width - 40; duration: 2000 }
-            PropertyAction { target: ball; property: "direction"; value: "left" }
+            PropertyAction { target: page; property: "state"; value: "left" }
             NumberAnimation { to: 20; duration: 2000 }
-            PropertyAction { target: ball; property: "direction"; value: "right" }
+            PropertyAction { target: page; property: "state"; value: "right" }
         }
 
         // Make y move with a velocity of 200
-        Behavior on y { SpringAnimation{ velocity: 200; }
+        Behavior on y {
+            SpringAnimation { velocity: 200; }
         }
 
-        Component.onCompleted: y = page.height-10; // start the ball motion
+        Component.onCompleted: y = page.height - 10; // start the ball motion
 
         // Detect the ball hitting the top or bottom of the view and bounce it
         onYChanged: {
@@ -48,31 +85,27 @@ Rectangle {
     Rectangle {
         id: leftBat
         color: "#328930"
-        x: 2; width: 20; height: 90
-        // ![0]
-        y: ball.direction == 'left' ? ball.y - 45 : page.height/2 -45;
-        Behavior on y { SpringAnimation{ velocity: 300 } }
-        // ![0]
+        width: 20; height: 90
+        x: 2;
     }
     Rectangle {
         id: rightBat
         color: "#328930"
-        x: page.width - 22; width: 20; height: 90
-        y: ball.direction == 'right' ? ball.y - 45 : page.height/2 -45;
-        Behavior on y { SpringAnimation{ velocity: 300 } }
+        width: 20; height: 90
+        x: page.width - width - 2
     }
 
     // The rest, to make it look realistic, if neither ever scores...
-    Rectangle { color: "#328930"; x: page.width/2-80; y: 0; width: 40; height: 60 }
-    Rectangle { color: "#1e1b18"; x: page.width/2-70; y: 10; width: 20; height: 40 }
-    Rectangle { color: "#328930"; x: page.width/2+40; y: 0; width: 40; height: 60 }
-    Rectangle { color: "#1e1b18"; x: page.width/2+50; y: 10; width: 20; height: 40 }
+    Rectangle { color: "#328930"; x: page.width / 2 - 80; y: 0; width: 40; height: 60 }
+    Rectangle { color: "#1e1b18"; x: page.width / 2 - 70; y: 10; width: 20; height: 40 }
+    Rectangle { color: "#328930"; x: page.width / 2 + 40; y: 0; width: 40; height: 60 }
+    Rectangle { color: "#1e1b18"; x: page.width / 2 + 50; y: 10; width: 20; height: 40 }
     Repeater {
         model: page.height / 20
-        Rectangle {
+        delegate: Rectangle {
             required property int index
             color: "#328930"
-            x: page.width / 2 - 5
+            x: parent.width / 2 - 5
             y: index * 20
             width: 10
             height: 10