Collie——基于 HTML5 的高性能 JavaScript 动画库

<div id="container"></div>
 
<!-- Load script -->
<script type="text/javascript" src="http://jindo.dev.naver.com/collie/deploy/collie.min.js"></script>
<script type="text/javascript">
// Load the logo.png image
collie.ImageManager.add({
    "logo" : "http://jindo.dev.naver.com/collie/img/small/logo.png"
});
 
// Create layer
var layer = new collie.Layer({
    width : 320,
    height : 480
});
 
// Create object that will be displayed on the screen
var item = new collie.MovableObject({
    x : "center",
    y : "center",
    velocityRotate : 180,
    backgroundImage : "logo" // The background image is re-sized to the pre-loaded logo.png size
}).addTo(layer); // Add to layer
 
// Add layer to renderer
collie.Renderer.addLayer(layer);
 
// Retrieve renderer from the container ID element
collie.Renderer.load(document.getElementById("container"));
 
// Start rendering
collie.Renderer.start();
</script>