Avancer un objet avec Effect.Move et Effect.Parallel [Fait]

**Nebulis** · 08/02/2009, 01h46

Bonjour à tout le monde,

Je dois réaliser une course de formule1 à l'aide de frameworks javascript. Le but est de faire avancer aléatoirement des voitures. Je calcule une valeur aléatoire correspondant au "saut" effectué de la voiture puis j'avance la voiture et je réitère l'opération jusqu'à la ligne d'arrivée.

Mon problème pour le moment est que je n'arrive pas a fluidifier le mouvement de la voiture entre chaque saut... hormis en trafiquant les valeurs des différent champs d'une manière pas très belle ... Alors d'abord le code :

Html :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr-FR" xml:lang="fr-FR">
	<head>
	    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
	    <title>Test de Effect.Opacity</title>
	    <link rel="stylesheet" type="text/css" href="index.css" />
	    <script type="text/javascript" src="prototype.js"></script>
	    <script type="text/javascript" src="scriptaculous.js?load=effects"></script>
	    <script type="text/javascript" src="deplacement.js"></script>
	</head>
	<body>
		<input type="button" id="bouton_depart" value="Lancer la course" /><br />
		<div id="voiture1" ><img src="voiture.png" /></div><br />
		<div id="voiture2" ><img src="voiture2.png" /></div><br />
		<div id="voiture3" ><img src="voiture3.png" /></div>
	</body>
</html>

Css :

Code :

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

1
2
3
#voiture1 ,#voiture2, #voiture3{
	display : inline;
}

Javascript :

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
function applyEffect(e) {
	Event.stop(e);
	avanceVoiture();
} // applyEffect
 
function avanceVoiture()
{
	new Effect.Parallel([
		new Effect.MoveBy('voiture1',0,5, {sync: true, fps : 100}),
		new Effect.MoveBy('voiture2',0,10, {sync: true, fps : 100}),
		new Effect.MoveBy('voiture3',0,5, {sync: true, fps : 100})
	],{delay : 0.0, duration : 10, fps : 100, from:0.0, to:1.0
	, afterFinish:avanceVoiture
	}
	);
}//avanceVoiture
 
function chargement() {
	Event.observe('bouton_depart', 'click', applyEffect);
} // bindTestElements
 
Event.observe(window, 'load', chargement);

Après plusieurs heures de test aussi peu fructueux les uns que les autres je me suis dit que j'allais trafiquer d'une façon peu banale les attributs delay et from, c'est a dire en leur passant des valeurs négatives. A ma grande surprise j'arrive a un bon résultat. Je débute vraiment en javascript mais le bouquin que j'ai lu spécifie des valeurs entre 0.0 et 1.0 pour from, et une valeur d'attente pour delay... mettre une valeur d'attente négative je ne trouve pas cela très élégant... alors si vous aviez une solution plus potable a me transmettre j'en serais ravi

P.S : pour le moment je n'ai pas de pas aléatoires c'est normal, je ferais ce point à partir du moment où l'avancer des mes voitures sera fluide

Cordialement

**gwyohm** · 09/02/2009, 19h12

Ton problème est que les voitutes semblent accélérer puis décélérer à chaque appel de ta fonction ?
As tu essayé avec l'option
transition: Effect.Transitions.linear
cf http://wiki.github.com/madrobby/scri...s/core-effects

Essaye avec juste ca :

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
 
function applyEffect(e) {
	Event.stop(e);
	avanceVoiture();
} // applyEffect
 
function avanceVoiture()
{
	new Effect.Parallel([
		new Effect.MoveBy('voiture1',0,5, {transition: Effect.Transitions.linear}),
		new Effect.MoveBy('voiture2',0,10, {transition: Effect.Transitions.linear}),
		new Effect.MoveBy('voiture3',0,5, {transition: Effect.Transitions.linear})
	],{duration : 1 
	, afterFinish:avanceVoiture, transition: Effect.Transitions.linear
	}
	);
}//avanceVoiture
 
function chargement() {
	Event.observe('bouton_depart', 'click', applyEffect);
} // bindTestElements
 
Event.observe(window, 'load', chargement);

Avancer un objet avec Effect.Move et Effect.Parallel [Fait]

Bibliothèques & Frameworks

Vue hybride

Discussions similaires

Partager

Partager