[dojo] convert JQUery animation to Dojo

[Rudolf]

Bonjour à tous,
en espérant que l'un d'entre vous pourra m'aider...
j'ai commencé à regarder dojo cette semaine, et à tenter de convertir mes routines JQuery vers ce Framework.
Pour la plupart ca se passe bien , mais celle ci je n'arrive pas à la convertir proprement!
La routine qui suit marche très bien en JQuery: j'anime un déplacement de carte qui s'estompe au fur et à mesure (déplacement et opacité en même temps)
La deuxieme animation (qui s'effectue après la première) ramene rapidement en invisible l'image à son point de départ ( t=1ms, opacity 0.0 dans l'etat laissé par la première anim );

Code: Select all

function CardMoveAnim(id)
{
	var div = document.getElementById(id);
	getActiveTablePlayer();
	Y=TargetY-div.offsetTop;
	X=TargetX-div.offsetLeft;
	$(div)
		.animate({ left:'+='+X+'px', top :'+='+Y +'px', opacity:0.0},"slow","swing")
		.animate({ left:'-='+X+'px', top :'-='+Y +'px'},1); 
}

Or en tentant de passer cela sous dojo, deux problèmes apparaissent:
1) que je mette 'chain' ou 'combine', seule la deuxième animation est lancée. est ce que ma syntaxe est correcte?
2) si je supprime la deuxième animation, la première se joue ... mais s'effectue d'abord la translation ... puis l'opacité... or je voulais les deux en même temps...
ce qui marche en JQuery

Code: Select all

function CardMoveAnim(id)
{
	var div = dojo.byId(id);
        var target= dojo.position(getTablePlayer(), true);	
	var start = dojo.position(div, true);
	var dqy = dojo.query(div);
	var deltaX= target.x - start.x;
	var deltaY= target.y - start.y;
 
 
	dojo.fx.chain(
		[
			dqy.animateProperty({ properties: { left: deltaX, top: deltaY, opacity:0.0}}),
			dqy.animateProperty({ properties: { left: -deltaX, top: -deltaY}})
		]).play();
 
	//dojo.style(id,{"left":start.x,"top":start.y});
}

Quelqu'un voit il une solution?
Ca me parait tout de même bien complexe la syntaxe dojo, par rapport au JQuery non?

[Een]

Bonjour,

Les frameworks sont en effet différents, l'un ou l'autre peuvent être plus ou moins adaptés selon les cas.
Plutôt que d'essayer de faire une conversion, il vaut peut être mieux voir comment écrire ce que tu veux avec Dojo sans te préoccuper de ton code JQuery initial.

Pour estomper et déplacer en même temps, je pense que tu dois pouvoir simplement lancer directement les animations l'une après l'autre au lieu de les chainer. Elles devraient alors s'exécuter en même temps.

Pour estomper la carte, tu dois pouvoir utiliser dojo.fadeOut :

Code: Select all

dojo.fadeOut( {node: $( 'card_' + card.id ), duration: 1000, delay: 1000} )

Pour déplacer, tu dois pouvoir utiliser dojo.fx.slideTo :

Code: Select all

dojo.fx.slideTo( {  node: mobile_obj,
                                top: top,
                                left: left ,
                                delay: delay,
                                duration: duration,
                                unit: "px" } );

Dans le framework BGA, tu as également une fonction bien pratique, slideToObjectPos(mobile_obj, target_obj, target_x, target_y, duration, delay), qui s'occupe de préparer le déplacement et renvoie l'animation correspondante :

Code: Select all

var anim = this.slideToObjectPos( $( 'card_' + card.id ), $( notif.args.tool_type ), 0, 0, 1000, 500 ).play();

Pour le retour, tu peux lier l'animation de retour à la fin de l'animation de déplacement avec dojo.connect (exemple ci-dessous pour lier une modification de style, que tu dois pouvoir remplacer par la définition et le lancement d'une autre animation)

Code: Select all

dojo.connect( anim, 'onEnd', this, dojo.hitch( this, function() {
            	                   dojo.style( 'card_' + card.id, 'zIndex', 'auto' );
			            	}));
anim.play();

[Rudolf]

merci Een.
je vais tester avec cela.