revamp animation example according to guidelines

The following changes are applied to the example:
- All qmllint warnings are fixed.
- Tv tennis part of the example is now actually working.
- Use let/const instead of var in JS.
- Use qsTr() in a few places.
- Use strict equality operator, when it's wise to do so.

Pick-to: 6.6 6.5
Change-Id: If0222feb942abfd0a6c9f8a8cab0ac60ced3d76e
Reviewed-by: Richard Moe Gustavsen <[email protected]>

7 files changed, 71 insertions, 36 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
diff --git a/examples/quick/animation/behaviors/wigglytext.qml b/examples/quick/animation/behaviors/wigglytext.qml
index 712078866d..1b987f6391 100644
--- a/examples/quick/animation/behaviors/wigglytext.qml
+++ b/examples/quick/animation/behaviors/wigglytext.qml
@@ -4,26 +4,28 @@
 import QtQml
 import QtQuick
 
+pragma ComponentBehavior: Bound
+
 Rectangle {
     id: container
 
-    property string text: "Drag me!"
+    property string text: qsTr("Drag me!")
     property bool animated: true
 
     width: 320; height: 480; color: "#474747"; focus: true
 
     Keys.onPressed: (event) => {
-        if (event.key == Qt.Key_Delete || event.key == Qt.Key_Backspace)
+        if (event.key === Qt.Key_Delete || event.key === Qt.Key_Backspace)
             container.remove()
-        else if (event.text != "") {
+        else if (event.text !== "") {
             container.append(event.text)
         }
     }
 
     function append(text) {
         container.animated = false
-        var lastLetter = container.children[container.children.length - 1]
-        var newLetter = letterComponent.createObject(container)
+        const lastLetter = container.children[container.children.length - 1]
+        let newLetter = letterComponent.createObject(container)
         newLetter.text = text
         newLetter.follow = lastLetter
         container.animated = true
@@ -36,8 +38,8 @@ Rectangle {
 
     function doLayout() {
         var follow = null
-        for (var i = 0; i < container.text.length; ++i) {
-            var newLetter = letterComponent.createObject(container)
+        for (let i = 0; i < container.text.length; ++i) {
+            let newLetter = letterComponent.createObject(container)
             newLetter.text = container.text[i]
             newLetter.follow = follow
             follow = newLetter
diff --git a/examples/quick/animation/doc/src/animation.qdoc b/examples/quick/animation/doc/src/animation.qdoc
index c2ae8c3dae..5ff4bcbc23 100644
--- a/examples/quick/animation/doc/src/animation.qdoc
+++ b/examples/quick/animation/doc/src/animation.qdoc
@@ -53,7 +53,6 @@
     \e{Tv Tennis} uses complex behaviors to make the paddles follow a ball to
     simulate an infinite tennis game. Again, a binding which depends on other
     values is applied to the position and a behavior provided the animation.
-    \snippet animation/behaviors/tvtennis.qml 0
 
     \section1 Easing Curves
 
diff --git a/examples/quick/animation/easing/easing.qml b/examples/quick/animation/easing/easing.qml
index 26272f3c0f..8b58bd5538 100644
--- a/examples/quick/animation/easing/easing.qml
+++ b/examples/quick/animation/easing/easing.qml
@@ -5,6 +5,8 @@ import QtQml
 import QtQml.Models
 import QtQuick
 
+pragma ComponentBehavior: Bound
+
 Rectangle {
     id: window
     width: 320; height: 480; color: "#232323"
@@ -90,7 +92,7 @@ Rectangle {
                 anchors.verticalCenter: parent.verticalCenter
 
                 MouseArea {
-                    onClicked: if (rect.state == '') rect.state = "right"; else rect.state = ''
+                    onClicked: if (rect.state === '') rect.state = "right"; else rect.state = ''
                     anchors.fill: parent
                     anchors.margins: -5 // Make MouseArea bigger than the rectangle, itself
                 }
diff --git a/examples/quick/animation/pathanimation/pathanimation.qml b/examples/quick/animation/pathanimation/pathanimation.qml
index 1f3577a47c..b366f8178d 100644
--- a/examples/quick/animation/pathanimation/pathanimation.qml
+++ b/examples/quick/animation/pathanimation/pathanimation.qml
@@ -15,7 +15,7 @@ Rectangle {
         antialiasing: true
 
         onPaint: {
-            var context = canvas.getContext("2d")
+            let context = canvas.getContext("2d")
             context.clearRect(0, 0, width, height)
             context.strokeStyle = "black"
             context.path = pathAnim.path
@@ -65,7 +65,7 @@ Rectangle {
 
         Text {
             anchors.centerIn: parent
-            text: "Box"
+            text: qsTr("Box")
         }
     }
 }
diff --git a/examples/quick/animation/pathinterpolator/pathinterpolator.qml b/examples/quick/animation/pathinterpolator/pathinterpolator.qml
index a035e9ba0c..102aee9cee 100644
--- a/examples/quick/animation/pathinterpolator/pathinterpolator.qml
+++ b/examples/quick/animation/pathinterpolator/pathinterpolator.qml
@@ -15,7 +15,7 @@ Rectangle {
         antialiasing: true
 
         onPaint: {
-            var context = canvas.getContext("2d")
+            let context = canvas.getContext("2d")
             context.clearRect(0, 0, width, height)
             context.strokeStyle = "black"
             context.path = motionPath.path
@@ -71,7 +71,7 @@ Rectangle {
 
         Text {
             anchors.centerIn: parent
-            text: "Box"
+            text: qsTr("Box")
         }
     }
 }
diff --git a/examples/quick/animation/states/states.qml b/examples/quick/animation/states/states.qml
index 78a8c0668b..47d10287b1 100644
--- a/examples/quick/animation/states/states.qml
+++ b/examples/quick/animation/states/states.qml
@@ -1,7 +1,6 @@
 // Copyright (C) 2017 The Qt Company Ltd.
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
 
-import QtQml
 import QtQuick
 
 Rectangle {