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

**al1pb** · 15/10/2012, 10h49

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

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
<!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.

**vermine** · 15/10/2012, 11h37

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 :

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
 
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'});

**al1pb** · 15/10/2012, 11h58

Bonjour,
Merci de me répondre.

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 :

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
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.

**vermine** · 15/10/2012, 12h50

Je crois avoir compris. Rajoutez une variable au début de votre fonction ClasseEff :

Code :

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

1
2
 
var instance = this;

Ensuite, remplacez le this à bon escient :

Code :

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

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

**al1pb** · 15/10/2012, 13h47

Envoyé par vermine

Code :

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

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 :

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
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.

**vermine** · 15/10/2012, 13h55

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.

**al1pb** · 15/10/2012, 14h11

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é.

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

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager