Collie——基于 HTML5 的高性能 JavaScript 动画库-阿里云开发者社区

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

2012-12-17 1337

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 　　Collie 是一个 JavaScript 库，用于创建高度优化的 HTML5 动画和游戏。Collie 可以运行在 PC 和手机上，使用 HTML5 Canvas 和 DOM。Collie 能够多线程稳定的处理多个对象，支持很多实用的功能，包括精灵动画和用户事件。

　　Collie 是一个 JavaScript 库，用于创建高度优化的 HTML5 动画和游戏。Collie 可以运行在 PC 和手机上，使用 HTML5 Canvas 和 DOM。Collie 能够多线程稳定的处理多个对象，支持很多实用的功能，包括精灵动画和用户事件。稳定支持 iOS 和 Android，并为每个平台的渲染提供优化的方法。

Demos

Origami（地址：http://jindo.dev.naver.com/collie/demo/origami/）
Drag&Drop（地址：http://jindo.dev.naver.com/collie/demo/drag/）
Particles（地址：http://jindo.dev.naver.com/collie/demo/heoyunhwa/）
Box2d（地址：http://jindo.dev.naver.com/collie/demo/box2d/）
Collie+sion（地址：http://jindo.dev.naver.com/collie/demo/colliesion/）

示例代码：

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