| OLD | NEW | 
|---|
| 1 #!mojo mojo:sky_viewer | 1 #!mojo mojo:sky_viewer | 
| 2 <sky> | 2 <sky> | 
| 3 <style> | 3 <style> | 
| 4 square { | 4 square { | 
| 5   margin: 50px; | 5   margin: 50px; | 
| 6   height: 100px; | 6   height: 100px; | 
| 7   width: 100px; | 7   width: 100px; | 
| 8   background-color: green; | 8   background-color: green; | 
| 9 } | 9 } | 
| 10 </style> | 10 </style> | 
| 11 <square /> | 11 <square /> | 
| 12 <script> | 12 <script> | 
| 13 import "dart:sky"; | 13 import "dart:sky"; | 
| 14 | 14 | 
| 15 void main() { | 15 void main() { | 
| 16   Element square = document.querySelector('square'); | 16   Element square = document.querySelector('square'); | 
| 17   double timeBase = null; | 17   double timeBase = null; | 
| 18 | 18 | 
| 19   void animate(double time) { | 19   void animate(double time) { | 
| 20     if (timeBase == null) | 20     if (timeBase == null) | 
| 21       timeBase = time; | 21       timeBase = time; | 
| 22     double delta = time - timeBase; | 22     double delta = time - timeBase; | 
| 23     int rotation = (delta / 10).floor(); | 23     int rotation = (delta / 10).floor(); | 
| 24     square.style.setProperty("transform", 'rotate(${rotation}deg)'); | 24     square.style["transform"] = "rotate(${rotation}deg)"; | 
| 25     window.requestAnimationFrame(animate); | 25     window.requestAnimationFrame(animate); | 
| 26   } | 26   } | 
| 27 | 27 | 
| 28   window.requestAnimationFrame(animate); | 28   window.requestAnimationFrame(animate); | 
| 29 } | 29 } | 
| 30 </script> | 30 </script> | 
| 31 </sky> | 31 </sky> | 
| OLD | NEW | 
|---|