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/)
-
Collie+sion(地址:http://jindo.dev.naver.com/collie/demo/colliesion/)
示例代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <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.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+
您可能感兴趣的相关文章
作者:山边小溪
主站:yyyweb.com 记住啦:)
欢迎任何形式的转载,但请务必注明出处。
【推荐】还在用 ECharts 开发大屏?试试这款永久免费的开源 BI 工具!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 大模型 Token 究竟是啥:图解大模型Token
· 35岁程序员的中年求职记:四次碰壁后的深度反思
· 继承的思维:从思维模式到架构设计的深度解析
· 如何在 .NET 中 使用 ANTLR4
· 后端思维之高并发处理方案
· BotSharp + MCP 三步实现智能体开发
· BotSharp 5.0 MCP:迈向更开放的AI Agent框架
· 5. RabbitMQ 消息队列中 Exchanges(交换机) 的详细说明
· 【ESP32】两种模拟 USB 鼠标的方法
· 设计模式脉络
2011-12-17 丝带(Ribbon)在网页设计中应用的20佳优秀案例