jquery sprite 플러그인 animateSprite.js

버튼을 누르면 애니메이션이 시작하고, 콜백을 받아야 할 일이 생김.

1. gif는 제어불가, 무한반복이라 사용불가.

2. video태그는 모바일서 플레이어가 띄워져서 사용불가.

3. css sprite는 콜백을 못받아서 사용불가.

4. flash x

그래서 jquery sprite 플러그인중 두개중 하나 선택.

http://blaiprat.github.io/jquery.animateSprite/

JS

var currentFps = 13;//낮을수록 부자연스럽고 빨라짐
var animationSettingsOld = {
	 fps: currentFps,
	 loop: true,
	 autoplay: true
};

$('.human').animateSprite(animationSettingsOld);
$('.human').animateSprite('play');

CSS

/*
   human.png는 sprite png로 준비.
   프레임갯수만큼 전체 width에서 나눈값을 width css값으로 설정.
*/
.human { width:450px; height:600px; background-image: url('../human.png'); }

EX)human.png

총 8100px. 18프레임 => 8100/18 = 450px

VIEW)