From 7da267c48bdc681817ed670fd0cc6108d37dc9b9 Mon Sep 17 00:00:00 2001
From: Adam Barth <abarth@chromium.org>
Date: Fri, 21 Nov 2014 13:27:09 -0800
Subject: [PATCH] Add a basic example of a spinning square

This example will let us test basic animation performance.

R=rafaelw@chromium.org

Review URL: https://codereview.chromium.org/748853004
---
 examples/spinning-square.sky | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)
 create mode 100644 examples/spinning-square.sky

diff --git a/examples/spinning-square.sky b/examples/spinning-square.sky
new file mode 100644
index 0000000000..8c3fb1ea16
--- /dev/null
+++ b/examples/spinning-square.sky
@@ -0,0 +1,26 @@
+<sky>
+<style>
+square {
+  margin: 50px;
+  height: 100px;
+  width: 100px;
+  background-color: green;
+}
+</style>
+<square></square>
+<script>
+var square = document.querySelector('square');
+var timeBase = 0;
+
+function animate(time) {
+  if (!timeBase)
+    timeBase = time;
+  var delta = time - timeBase;
+  var rotation = Math.floor(delta / 10);
+  square.style.transform = 'rotate(' + rotation + 'deg)';
+  requestAnimationFrame(animate);
+}
+
+requestAnimationFrame(animate);
+</script>
+</sky>