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:
parent
173b73535b
commit
7da267c48b
26
examples/spinning-square.sky
Normal file
26
examples/spinning-square.sky
Normal 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>
|
Loading…
x
Reference in New Issue
Block a user