AnimeSprite/index.html at master · Host32/AnimeSprite · GitHub

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<html>
<head>
	<title>JS Anime Frame</title>
	<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
</head>
<script type="text/javascript" src="JS/jquery.js"></script>
<script type="text/javascript" src="JS/anime.js"></script>
<script type="text/javascript">
	$(function(){
		var animate;
		var animacao = new anime(
			{
				patch : 'Imagens/default_char.png',
				frameWidth : 32,
				frameHeight: 33.3,
				animacoes: 5,
				framesPorAnimacao: 6,
				container: '#animacao',
				classe : 'animacao',
				id     : 'persoAnimado',
				tempoPorFrame: 100
			}
		);

		animacao.append();
		$("#start").on("click",function(){
			clearInterval(animate);
			animate = setInterval(function(){
				animacao.updateFrame();
				animeUpdateFrame(animacao);
			},animacao.options.tempoPorFrame);
		});
		$("#pause").on("click",function(){
			clearInterval(animate);
		});
		$("#stop").on("click",function(){
			clearInterval(animate);
			animacao.stop();
			animeUpdateFrame(animacao);
		});
		$("#esq").on("click",function(){
			animacao.setAnimacao(2);
		});
		$("#up").on("click",function(){
			animacao.setAnimacao(3);
		});
		$("#down").on("click",function(){
			animacao.setAnimacao(1);
		});
		$("#dir").on("click",function(){
			animacao.setAnimacao(2,true);
		});
		$("#downdir").on("click",function(){
			animacao.setAnimacao(4,true);
		});
		$("#downesq").on("click",function(){
			animacao.setAnimacao(4);
		});
		$("#updir").on("click",function(){
			animacao.setAnimacao(5,true);
		});
		$("#upesq").on("click",function(){
			animacao.setAnimacao(5);
		});
	});
</script>
<body>
<div id="animacao">

</div>

<div style="position: absolute;top:200px;">
	<button id="start">Start</button>
	<button id="pause">Pause</button>
	<button id="stop">Stop</button>
	<button id="esq"><</button>
	<button id="up">/\</button>
	<button id="down">\/</button>
	<button id="dir">></button>
	<button id="downdir">_/</button>
	<button id="downesq">\_</button>
	<button id="upesq">/-</button>
	<button id="updir">-\</button>
</div>
</body>
</html>