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
This commit is contained in:
Adam Barth 2014-11-21 13:27:09 -08:00
parent 173b73535b
commit 7da267c48b

View File

@ -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>