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 imagecollie.ImageManager.add({    "logo" : "http://jindo.dev.naver.com/collie/img/small/logo.png"}); // Create layervar layer = new collie.Layer({    width : 320,    height : 480}); // Create object that will be displayed on the screenvar 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 renderercollie.Renderer.addLayer(layer); // Retrieve renderer from the container ID elementcollie.Renderer.load(document.getElementById("container")); // Start renderingcollie.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動畫庫

編譯來源：夢想天空 ◆ 關注前端開發技術 ◆ 分享網頁設計資源