[JQuery] Dessin animé

**SpaceFrog** · 10/04/2010, 20h50

Bonjour,

Dans la série "Mais elle me viennent d'où ces idées saugrenues?" , voici un petit script qui vous permettra de faire du dessin animé.

Il faut juste une image avec en séquence les differents "frames" de l'animation.
Dans cet exemple nous prendrons une boule dans le but de la faire tourner.
J'ai donc créé une image en decomposant la rotation d'un boule en 12 etapes et en les juxatposant (cf image jointe)
On peut imaginer mettre le scénario sur plusieurs lignes, il suffirait d'une boucle imbriquée pour lire ligne par ligne les frames dans l'ordre

Pour la démo tout est dans le même repertoire:
la page html
l'image roue.png
le fichier js jquery-1.4.2.min.js

Le but n'est pas d'emuler un gif, mais de pouvoir controler l'animation:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style type="text/css">
#roue, #roue_ {
   width:80px;
   height:80px;
	background-image: url('roue.png');
	background-repeat: no-repeat;
	background-position: 0 0;
	margin-left: 10px;
 
	}
 
 
#scroll {
	width:100px;
	height:20px;
	overflow-Y:hidden;
	overflow:auto;
	}
#w {
	width:980px;
	height:10px;
 
	}
 
#marche, #marche1 {
   width:48px;
   height:74px;
	background-image: url('marche.png');
	background-repeat: no-repeat;
	background-position: 0 0;
	margin-left: 30px;
		}
#marche {position: absolute;
         top:400px;
         left:0;}	
 
#scroll1 {
	width:100px;
	height:20px;
	overflow-Y:hidden;
	overflow:auto;
	}
#w1 {
	width:384px;
	height:10px;
 
	}	
</style>
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('#roue').css('backgroundPosition','0 0')
   var pos=$('#roue').css('backgroundPosition').split(' ')[0].replace(/px|pt/,'')
   var tourne=setInterval( function(){
   		       pos=(pos-80<-880)?0:pos-80;
   		       $('#roue').css('backgroundPosition',pos+'px 0');},50)
 
 
	$('#scroll').scroll( function(){
					 seq=- Math.floor($('#scroll').scrollLeft()/80) * 80
  					 $('#roue_').css('backgroundPosition',seq+'px 0');
  					 });
 
   $('#marche').css('backgroundPosition','0 0')
   var step=$('#marche').css('backgroundPosition').split(' ')[0].replace(/px|pt/,'')
   var walk=setInterval( function(){
   		       step=(step-48<-240)?0:step-48;
   		       $('#marche').css('backgroundPosition',step+'px 0');
   		       avance=$('#marche').css('left').replace(/px|pt/,'')
   		       $('#marche').css('left',(avance>800)?'0px':(+avance+10)+'px');
 
   		       },100)
 
 
	$('#scroll1').scroll( function(){
					 seq1=- Math.floor($('#scroll1').scrollLeft()/48) * 48
  					 $('#marche1').css('backgroundPosition',seq1+'px 0');
  					 });
 
 });</script>
<title>Tourne Boule</title>
</head>
<body>
<div id="roue"></div>
<br/><br/>
<div id="roue_"></div>
<div id="scroll">
 <div id="w">&nbsp;</div>
</div> 
<br/>
<div id="marche"></div>
 
<div id="marche1"></div>
<div id="scroll1">
 <div id="w1">&nbsp;</div>
</div> 
 
</body>
</html>

La petite page de démo pour les gens pressés ...

Dans ma démo le garçon qui courre montre le deplacement de la div
Le rat est lui sur fond transparent
La boule rouge joue avec la semi transparence (on voit le fond au travers)

Le principe est relativement simple: Un div de la taille d'un frame, l'image en background position 0 0, il suffit ensuite de decaller le background positon d'une largeur de frame

Un autre intéret de cette methode est qu'il permet de faire une animation autorisant la semi transparence !! Ce que le gif animé ne permet pas ...

PS. N'étant pas brillant en graphisme, si une ame généreuse pouvait me fournir un sprite de personnage courant ou marchant de profil , de face et de dos...

Invité · 10/04/2010, 22h52

Soir,

Joli "sprite"!

**circular17** · 11/04/2010, 20h58

C'est très joli.

**le_chomeur** · 12/04/2010, 11h24

ta première source en jquery mon spaffy, très sympa

**danielhagnoul** · 13/04/2010, 10h17

Bonjour.

C'est bien !

Mais il y a déjà beaucoup de concurrents, il y en a deux que j'aime bien :

http://www.spritely.net/documentation/

http://devness.com/2009/06/playing-w...animated-menu/

**SpaceFrog** · 13/04/2010, 11h01

Oui j'ai aussi trouvé ces deux sites en recherchant des sprites

après avoir fait mon code.
Quand j'aurais un peu de temps je ferais mon propre addin JQUery ^^

Y'en a déja un par là
http://tech.hyzonia.com/2009/11/jque...on-plugin.html

[JQuery] Dessin animé

Contribuez

Discussions similaires

Partager

Partager