Collie es una biblioteca JavaScript para la creación de avanzadas animaciones que utilizan Canvas HTML5. La principal ventaja de esto es que las animaciones funcionan tanto en computadoras de escritorio como en teléfonos móviles, obviamente siempre y cuando HTML5 este soportado por el navegador utilizado.
Otro detalle interesante es que Collie utiliza una estructura de funcionamiento que le permite detectar los eventos del usuario, como utilizar sprites sin la necesidad de elevar demasiado el uso de CPU de la plataforma. Perfectamente comprobado en sistemas operativos móviles Android y iOS.
Como desventaja podemos citar el peso de la biblioteca, unos 88kb, bastante elevado para aplicaciones móviles, sin embargo comprimidos mediante gzip el resultado final se acerca a los 20kb, peso mucho más aceptable.
Ejemplo de uso de Collie
<div id="container"></div>
<!-- Load script -->
<script type="text/javascript" src="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"
}).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>
La compatibilidad con navegadores es la siguiente:
- PC: IE9+(IE6~8 no-transform-support), Chrome, Firefox, Safari, Opera.
- OS Móviles: iOS4+, Android2.1+, WindowsMobile 7.5+.
Web: Collie