Animation javascript, foule ola
Bonjour à tous !
J'ai un problème concernant des animations sur une de mes pages.
Je vous explique:
J'ai une petite foule de personnage. Chaque personnage est composé d'un sprite en 3 parties.
J'utilise la bibliothèque Spritely.js pour pouvoir parcourir mon sprite et en faire une animation.
L'idée est de faire faire une ola à la foule. Le personnage ayant un sprite en 3 parties possède 3 états:
- état 0: bras contre le corps
- état 1: bras à moitier levé
- état 2: bras complètement levé
Je vous mets ici les codes de mes pages html/scss/js
HTML :
Code:
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
| <!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>TEST</title>
<!-- build:css css/main.css -->
<link rel="stylesheet" href="stylesheets/screen.css">
<!-- endbuild -->
<?php $j = 0; ?>
</head>
<body>
<div class="container">
<?php for ($i=0; $i < 42 ; $i++) {
$p = rand(0,7);
if ($j == 13) {
echo '<div id="perso-'.$p.'" class="gif '.$j.'"></div>';
$j = 0;
} else {
echo '<div id="perso-'.$p.'" class="gif '.$j.'"></div>';
$j++;
}
}
?>
</div>
<!-- build:js js/main.js -->
<script src="js/jquery-1.3.2.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.spritely/0.6.8/jquery.spritely.js"></script>
<!-- <script src="js/jquery.spritely-0.4.js"></script> -->
<script src="js/main.js"></script>
<!-- endbuild -->
</body>
</html> |
CSS:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| /* Welcome to Compass.
* In this file you should write your main styles. (or centralize your imports)
* Import this file using the following HTML or equivalent:
* <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
@import "compass/reset";
@import "compass";
@for $i from 0 through 7 {
#perso-#{$i} { background: url(img/perso#{$i}.png) no-repeat top left; width:179px;height:200px; float:left; margin-left:0px;}
}
.container{
width: 100%;
min-height:1300px;
margin:30px auto;
} |
JS:
Code:
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
| (function(){
var i = 0;
var _nbrColumn = 13;
var _fps = 6.5;
var _interval = 500;
var check = function(){
if(i < _nbrColumn){
if (i == 0) {
$('.' + i).sprite({fps: _fps, no_of_frames: 3, play_frames: 3});
i++;
console.log('woop -> premier passage done');
} else {
$('.' + (i-1)).sprite({fps: _fps, no_of_frames: 3, play_frames: 2, rewind: true});
$('.' + (i) ).sprite({fps: _fps, no_of_frames: 3, play_frames: 3});
i++;
}
setTimeout(check, _interval);
}
else {
console.log('done');// check again in a second
}
}
$('.container').click(function ola(){
check();
});
})(jQuery); |
Malheureusement comme vous pouvez le voir ici: http://www.woodleg.fr/test-perso/ , l'animation ne marche pas bien et je ne comprends pas pourquoi ... Cette page est pour un test à savoir que la foule plus tard sera bien plus imposante (;))
Je me tourne donc vers vous pour un petit peu d'aide et essayer de me débloquer.
J'espère avoir été suffisamment clair dans l'énonciation de mon problème.
J'attends vos retours, conseils, aide avec joie !
Cordialement et numériquement, Woodleg.
PS: J'ai essayé avec un autre algo que suis :
Code:
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
| var i = 0;
var _playFramePre = 2;
var _startFramePre = 1;
var _playFrame = 1;
var _startFrame = 1;
var _startFramePre2 = 0;
var _nbrColumn = 47;
var _fps = 3;
var _interval = 200;
var check = function(){
if(i < _nbrColumn){
if (i == 0) {
_startFrame = 2;
_playFrame = 2;
$('.' + i).sprite({fps: _fps, no_of_frames: 3, play_frames: _playFramePre, start_at_frame: _startFramePre})
i++;
_startFramePre = 3;
_playFramePre = 1;
_playFrame = _playFramePre;
_startFrame = 1;
console.log('woop -> premier passage done');
} else {
if (i == 1){
$('.' + (i-1)).sprite({fps: _fps, no_of_frames: 3, play_frames: _playFramePre, start_at_frame: _startFramePre, rewind: true});
console.log('Animation -> personnage i-1 en reverse (frame 3 -> frame 2)');
$('.' + (i)).sprite({fps: _fps, no_of_frames: 3, play_frames: _playFrame, start_at_frame: _startFrame});
console.log('Animation -> personnage i en normal (frame 1 -> frame 2)');
i++;
console.log('woop -> deuxieme passage done');
} else {
_startFramePre2 = _startFramePre - 1;
$('.' + (i-2)).sprite({fps: _fps, no_of_frames: 3, play_frames: _playFramePre, start_at_frame: _startFramePre2, rewind: true});
console.log('Animation -> personnage i-2 ('+(i-2)+') en reverse (frame 2 -> frame 1)');
$('.' + (i-1)).sprite({fps: _fps, no_of_frames: 3, play_frames: _playFramePre, start_at_frame: _startFramePre2});
console.log('Animation -> personnage i-1 ('+(i-1)+') en reverse (frame 2 -> frame 3)');
$('.' + (i) ).sprite({fps: _fps, no_of_frames: 3, play_frames: _playFrame, start_at_frame: _startFrame});
_startFramePre = _startFramePre - 1;
console.log('woop -> '+i);
i++;
}
}
setTimeout(check, _interval);
}
else {
console.log('done');// check again in a second
}
}
$('.box-envoi').click(function ola(){
check();
}); |
Mais pareil, ca ne marche pas très bien ...
