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