Collie——基于 HTML5 的高性能 JavaScript 动画库
- - 博客园_梦想天空JavaScript 库，用于创建高度优化的. Collie 可以运行在 PC 和手机上，使用 HTML5 Canvas 和 DOM. Collie 能够多线程稳定的处理多个对象，支持很多实用的功能，包括精灵动画和用户事件. 稳定支持 iOS 和 Android，并为每个平台的渲染提供优化的方法. Drag&Drop（地址：.
Collie——基于 HTML5 的高性能 JavaScript 动画库
标签：
collie
html5
性能
| 发表时间：2012-12-17 12:28 | 作者：梦想天空（山边小溪）
出处：http://www.cnblogs.com/lhb25/
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/）
-
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>
<!-- 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.min.js (89.07kb, gzipped 20kb)
collie.tool.min.js debug version
collie.Box2d.min.js debug version
帮助文档
这里是 API 参考文档 ，下面是开发教程，包括基础入门教程和高级应用教程两部分。
- 基础
- 高级
浏览器兼容
PC：ie9+(ie6~8 no-transform-support), chrome, firefox, safari, opera
Mobile OS：iOS4+, Android2.1+, WindowsMobile 7.5+
您可能感兴趣的相关文章
本文链接： Collie——基于 HTML5 的高性能JavaScript动画库
编译来源： 梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源
hide
相关 [collie html5 性能] 推荐：
Flash与HTML5性能比较
- frocket - SolidotRinick 写道 "近日，一项评测向人们证明了：HTML5在性能上仍远远落后于Flashplayer. 测试使用了Droid X, Nexus One, Desire HD, Atrix, PlayBook, Galaxy Tab, Xoom 等设备，分别测试了位图，矢量图，数值运算，视频播放等项目.
【转载】HTML5性能分析面面观
- - HTML5研究小组从性能角度来说，HTML5首先是缩减了HTML文档，使这件事情变得更简单. 第一，从用户可读性上说，原先一大堆东西，像初学者第一次看到这些东西是看不懂的，而HTML5的声明方式对用户来说显然更友好一些. 第二，文档编码的声明，用HTML5方式的话，就很简单. 我们说可以先用HTML5的方式就是把DOCTYPE先改了，因为目前很多页面都还是用传统的方式.
使用HTML5监测网站性能
- - 标点符在这个信息爆炸的互联网时代，越来越多的人缺少了等待的耐心，网站性能对于一个网站来说越来越重要. 以下为监控到的网站打开时间对跳出率的影响：. 当网站打开时间在0-1秒时，跳出率为12%. 当网站打开时间在1-2秒时，跳出率为26%. 当网站打开时间在2-3秒时，跳出率为30%. 从上面的数据很明显的可以看到网站的打开速度对用户体验或者网站信任度的影响会产生多大的影响.
Chrome浏览器HTML5性能评测
- - HTML5研究小组编者按：大家知道HTML5有两大特点是强化Web网页的表现性能和追加本地数据库等Web应用的功能. 对于 表现功能上的呈现问题，想必也是绝大多数Chrome浏览器用户选择使用Chrome的其中一个最主要原因. 而了解HTML5架构的浏览器，追求浏览器网 页在线视频的高清播放能力以及浏览器稳定运行性能的玩家们，则更关心Chrome浏览器HTML5性能的表现.
BI报告：性能不是问题！HTML5更具长期优势
- - TechWeb 今日焦点 RSS阅读 导语：Business Insider Intelligence日前在最新报告中剖析了原生应用与HTML5的发展现状，指出HTML5的性能和盈利等问题都是可以解决的，而HTML5正以“润物细无声”的方式被越来越多人接受，并且与原生应用相比更具长期优势. 如今的移动浏览器支持大部分HTML5功能（绿色为支持，蓝色为部分支持，红色为不支持）.
HTML5游戏性能测试：IE10不及预期
- - ITeye资讯频道近日一个名为Scierra的开发者组织在其博客中撰文表示， 微软最新的IE10浏览器确实在对传统网页内容的访问方面较其它竞争对手有着一定优势，但其HTML5游戏性能依旧十分糟糕. 该组织通过一个名为Construct 2的HTML5游戏开发工具对IE10、Chrome以及Firefox三款浏览器的HTML5游戏性能进行了测试，结果显示IE10惨败于另外两名竞争对手.
兼顾性能和兼容体验：HTML5时代的浏览器全面测试
- - WPDang导言：自第一台PC诞生以来，桌面电脑以及随后不断涌现的笔记本、平板以及智能手机等设备越来越普及，而近20年来互联网的出现和高速发展，则让浏览器成为这些设备上使用率最高的应用程序之一. 蒂姆·伯纳斯·李作为首位使用超文本来分享资讯的人，于1990在欧洲粒子物理实验室里开发出首个网页浏览器WorldWideWeb.
HTML5 logo 发布
- Greyby - 酷壳 - CoolShell.cn2011年1月19日，W3C发布了HTML5的log，打开W3C的页面，下在的图片印入眼前. 我的第一感觉，就像是看到了小时候看的八一电影制片产的电影. 这分明是号召全世界的无产Web程序员们团结起来，不畏艰难，不怕牺牲，一定要把HTML5的革命事业进行到底. 所以，请各位Web程序员不但在你们的HTML5的网页上加上下面的徽章（关于各个徽章的含义，请参看这里）.
html5 canvas入门
- - Marshal's Blog可以把canvas看做div，不过，它的长和宽不能通过css来定义，要使用标签属性：. 或者javascript对象属性设置：. 使用canvas，只有一种操作方式，使用javascript. 获得canvas对象的上下文对象，该对象是操作canvas的主要对象：. 使用canvas画最简单的线， 点击运行示例，结果看起来是这样：.