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

　　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>

 

源码下载

　　collie (241.1kb, debugging)     

　　collie.min.js (89.07kb, gzipped 20kb)

　　collie.tool.min.js   debug version

　　collie.Box2d.min.js   debug version

 

帮助文档

　　这里是 API 参考文档 ，下面是开发教程，包括基础入门教程和高级应用教程两部分。

1. 基础
   • Drawing Rectangle
   • MovableObject
   • Repeat Timer
   • Cycle Timer
   • Transition Timer
   • Delay Timer
   • Queue Timer
   • Timeline Timer
   • timer to use DisplayObject
   • Event
   • text-ellipsis and word-wrap
   • ImageManager
2. 高级
   • backgroundRepeat
   • hitArea
   • Event - stop bubbling
   • sprite animation
   • sprite animation - user action
   • How to support retina display

 

浏览器兼容

　　PC：ie9+(ie6~8 no-transform-support), chrome, firefox, safari, opera
　　Mobile OS：iOS4+, Android2.1+, WindowsMobile 7.5+

 

您可能感兴趣的相关文章

 

• 10套精美的免费网站后台管理系统模板
• 精心挑选的优秀 jQuery Ajax 分页插件
• 十款精心挑选的在线CSS3代码生成工具
• 让人爱不释手的13套精美网页图标素材
• Web前沿：那些让人惊叹的CSS3应用

 

本文链接：Collie——基于 HTML5 的高性能JavaScript动画库

编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源