Animación cuadro a cuadro usando spritely y animación por programación usando greensock

Post by **xacarana** » Mon Apr 17, 2017 3:34 pm

En este ejercicio vamos a realizar una animación usando un spritesheet, este es una imagen que esta compuesta por varios frames de una animación, como muestra la siguiente imagen:

Luego debemos descargar la librería spritely y jquery. Por último implementar el siguiente código.

Code: Select all

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="https://code.jquery.com/jquery-1.8.2.min.js"></script>
	<script type="text/javascript" src="js/jquery.spritely.js"></script>
	<script type="text/javascript">
		window.onload = function()
		{
			$('#personaje').sprite({fps: 12, no_of_frames: 5});
		}
	</script>
	<style type="text/css">
		#personaje{
			background-image: url(img/monsterSpriteSheet.png);
			background-repeat: no-repeat;
			width: 110px;
			height: 110px;
			background-color: red;
		}
	</style>
</head>
<body>
	<div id="personaje"></div>
</body>
</html>

Para animar y desplazar el personaje, combinamos dos librerías, spritely y greensock, como se muestra en el siguiente ejemplo.

Nota: Tenga presente los siguientes enlaces, para entender mejor que pasa en el código de la animación.

Code: Select all

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="https://code.jquery.com/jquery-1.8.2.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
	<script type="text/javascript" src="js/jquery.spritely.js"></script>
	<script type="text/javascript">
		window.onload = function()
		{
			$('#personaje').sprite({fps: 12, no_of_frames: 7});
			TweenLite.to($('#personaje'), 5, {opacity:0,left:"490px",ease: Bounce.easeIn});
		}
	</script>
	<style type="text/css">
		#personaje{
			position: absolute;
			background-image: url(img/monsterSpriteSheet.png);
			background-repeat: no-repeat;
			width: 100px;
			height: 100px;
		}
		#escena{
			width: 600px;
			height: 110px;
			background-color: cyan;
			position: relative;
		}
		#pasto{
			position: absolute; 
			z-index: 1;
			width: 100%;
			height: 20px;
			background-color:green;
			bottom:0px;
			left: 0px;
		}
	</style>
</head>
<body>
<div id="escena">
	<div id="pasto"></div>
	<div id="personaje"></div>
</div>
</body>
</html>