1 files changed, 51 insertions, 28 deletions
diff --git a/examples/declarative/animation/animation.qml b/examples/declarative/animation/animation.qml
index 1d60ac0..5cb471e 100644
--- a/examples/declarative/animation/animation.qml
+++ b/examples/declarative/animation/animation.qml
@@ -1,28 +1,51 @@
-<Rect width="400" height="200" color="white">
-    <Rect width="40" height="40" y="80" color="#FF0000" radius="10">
-
-        <x>
-            <!--
-            Animate the x property.  Setting repeat to true makes the
-            animation repeat indefinitely, otherwise it would only run once.
-            -->
-            <SequentialAnimation running="true" repeat="true">
-                <!-- Move from 0 to 360 in 500ms, using the easeInOutQuad easing function -->
-                <NumericAnimation from="0" to="360" easing="easeInOutQuad" duration="500"/>
-                <!-- Then pause for 200ms -->
-                <PauseAnimation duration="200"/>
-                <!-- Then move back to 0 in 2 seconds, using the easeInOutElastic easing function -->
-                <NumericAnimation from="360" to="0" easing="easeInOutElastic" duration="2000"/>
-            </SequentialAnimation>
-        </x>
-
-        <color>
-            <!-- Alternate color between red and green -->
-            <SequentialAnimation running="true" repeat="true">
-                <ColorAnimation from="#FF0000" to="#00FF00" duration="5000"/>
-                <ColorAnimation from="#00FF00" to="#FF0000" duration="5000"/>
-            </SequentialAnimation>
-        </color>
-
-    </Rect>
-</Rect>
+Rect {
+    width: 400
+    height: 200
+    color: "white"
+    Rect {
+        width: 40
+        height: 40
+        y: 80
+        color: "#FF0000"
+        radius: 10
+        // Animate the x property.  Setting repeat to true makes the
+        // animation repeat indefinitely, otherwise it would only run once.
+        x: SequentialAnimation {
+            running: true
+            repeat: true
+            // Move from 0 to 360 in 500ms, using the easeInOutQuad easing function
+            NumericAnimation {
+                from: 0
+                to: 360
+                easing: "easeInOutQuad"
+                duration: 500
+            }
+            // Then pause for 200ms
+            PauseAnimation {
+                duration: 200
+            }
+            // Then move back to 0 in 2 seconds, using the easeInOutElastic easing function
+            NumericAnimation {
+                from: 360
+                to: 0
+                easing: "easeInOutElastic"
+                duration: 2000
+            }
+        }
+        // Alternate color between red and green
+        color: SequentialAnimation {
+            running: true
+            repeat: true
+            ColorAnimation {
+                from: "#FF0000"
+                to: "#00FF00"
+                duration: 5000
+            }
+            ColorAnimation {
+                from: "#00FF00"
+                to: "#FF0000"
+                duration: 5000
+            }
+        }
+    }
+}