Récupération d'objet avec onComplete après un Morph

Version imprimable

Bonjour,
J'ai un petit soucis avec un code Mootools que voilà:

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Test Mootools</title>
		<script src="mootools-core.js"></script>
	</head>
	<body>
		<h3 id="titre">Titre 1</h3>
 
		<script>
		window.addEvent('domready',function(){
			function ClasseEff(id,temps){
				this.eff1 = new Fx.Morph(id,{
					duration:temps,
					transition:'quad:in',
					onComplete:function(el){
						this.eff2.start({'fontSize':'16px'});
						// ne fonctionne pas car this est un objet morph et non ClasseEff
					}
				});
				this.eff2 = new Fx.Morph(id,{
					duration:temps,
					transition:'quad:out',
					onComplete:function(){
						this.eff1.start({'fontSize':'80px'});
						// ne fonctionne pas car this est un objet morph et non ClasseEff
					}
				});
				this.go = function(){
					this.eff1.start({'fontSize':'80px'});
				};
			}
			var effet = new ClasseEff($('titre'),2000);
			effet.go();
		});
		</script>
	</body>
</html>

J'ai mis une page html entière pour permettre les testes...

Mon problème est que je n'arrive pas à exécuter le 2e effet (effet.eff2.start()) à la fin du 1er effet...
Comme écrit en remarque dans mon code, this correspond à un objet Morph et non à ma class effet.
Existe-il une solution ?
Merci d'avance.

Bonjour,

Je dois avouer que je ne comprends pas votre manière de faire. Vu que vous parlez de Class, autant créer une classe et lui donner des méthodes. Le this sera remplacé par l'objet effet (qu'on veillera à rendre accessible) :

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
 
var ClasseEff = new Class({
   initialize: function(id, temps){
      this.id = id,
      this.temps = temps,
 
      this.eff1 = new Fx.Morph(this.id,{
         duration: this.temps,
         transition: 'quad:in',
         onComplete: function(){
            effet.eff2.start({'fontSize':'16px'});
         }
      }),
 
      this.eff2 = new Fx.Morph(this.id,{
         duration: this.temps,
         transition: 'quad:out',
         onComplete: function(){
            effet.eff1.start({'fontSize':'80px'});
         }
      })
   }
});
 
var effet = new ClasseEff($('titre'), 2000);
effet.eff1.start({'fontSize':'80px'});

Bonjour,
Merci de me répondre.

Citation:

Envoyé par vermine

Je dois avouer que je ne comprends pas votre manière de faire

Alors, je suis assez mal partis...

Mon but est de pouvoir créer plusieurs objets avec différents annimations:
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 window.addEvent('domready',function(){ function ClasseEff(id,temps){ this.eff1 = new Fx.Morph(id,{ duration:temps, transition:'quad:in', onComplete:function(el){ this.eff2.start({'fontSize':'16px'}); // ne fonctionne pas car this est un objet morph et non ClasseEff } }); this.eff2 = new Fx.Morph(id,{ duration:temps, transition:'quad:out', onComplete:function(){ this.eff1.start({'fontSize':'80px'}); // ne fonctionne pas car this est un objet morph et non ClasseEff } }); this.go = function(){ this.eff1.start({'fontSize':'80px'}); }; } var effet = new ClasseEff($('titre'),2000); effet.go(); var effet2 = new ClasseEff($('text'),1000); effet2.go(); });
C'est pour cette raison que j'aimerais récupérer "une instance" à la fin du Morph eff1 pour lancer le 2e.

J'espère être un peu plus claire, c'est pas évident à expliquer...

Le but final du scripte est de récupérer des informations d'animation puis créer les objets morph et les exécuter.

Encore merci.

15/10/2012, 12h50
vermine
Je crois avoir compris. Rajoutez une variable au début de votre fonction ClasseEff :
Code:

1 2 var instance = this;
Ensuite, remplacez le this à bon escient :

Code:

instance.eff2.start({'fontSize':'16px'});

Citation:

Envoyé par vermine

Code:

var instance = this;

Bravo, ça fonctionne à merveille.
Je n'ai pas tout compris, mais ça fonctionne. J'avais cherché durant le week-end assez longtemps...
Merci beaucoup.
Je met le code qui fonctionne si ça peut aider d'autres personnes:

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
window.addEvent('domready',function(){
			function ClasseEff(id,temps){
				var instance = this;
				this.eff1 = new Fx.Morph(id,{
					duration:temps,
					transition:'quad:in',
					onComplete:function(el){
						instance.eff2.start({'fontSize':'16px'});
					}
				});
				this.eff2 = new Fx.Morph(id,{
					duration:temps,
					transition:'quad:out',
					onComplete:function(){
						instance.eff1.start({'fontSize':'80px'});
					}
				});
				this.go = function(){
					this.eff1.start({'fontSize':'80px'});
				};
			}
			var effet = new ClasseEff($('titre'),2000);
			var effet2 = new ClasseEff($('text'),1000);
			effet.go();
			effet2.go();
		});

Un immense MERCI, ce forum porte bien son nom...
A bientôt.

15/10/2012, 13h55
vermine

De rien :-)

Le fait de déclarer une variable dans la fonction va rendre sa portée locale à la fonction. Chaque nouvel appel de la fonction créera sa propre variable dans laquelle on sauvegarde l'instance de la fonction (this). Ca permet de différencier les instances et de ne plus passer par this afin d'atteindre l'objet voulu et non le Morph.
15/10/2012, 14h11
al1pb

Encore 1000 Mercis

Donc, "var instance" est utilisé seulement lors de la construction d'un objet ClasseEff et mémorisé dans les Morph, tout comme id et temps (les 2 arguments de la fonction du constructeur)
C'est nettement plus claire, mais je n'y avais pas pensé...
Merci, en plus de résoudre mon problème, j'ai la chance d'avoir un cours privé.