Conversion de chaine d'animation JQUery vers du Dojo
BOnsoir,
bon voilà, je me suis mis à dojo depuis hier... et j'ai déjà quelques soucis en ayant essayé de porter du JQuery:
en jQuery, on chaine les animations par un point,
en dojo c'est un peu complexe, et je n'arrive pas à faire marcher. En plus il semble que les animations ne soit pas bien synchronisées.
le but était de transférer une image à un autre endroit en l'effacant.
Puis en la faisant revenir invisible à son point de départ. (je voulais que son retour au point de départ soit bien effectué après son mouvement, et je n'ai trouvé d'autre moyen que de faire l'animation en sens inverse après la premiere... car si je jouais l'animation puis positionnait l'image en coordonnées du départ, le resultat était imprévisible (du certainement à la désynchronisation de l'animation).
En jquery, mon code qui marchait très bien donnait:
Code:
1
2
3
4
5
6
7
8
9
10
11
| 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);
} |
et j'avais une opacité qui s'effacait progressivement en même temps que mon image se deplacait.
puis j'ai tenté de la passer en dojo:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| 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});
} |
mais ca ne fonctionne pas comme je veux, plusieurs problèmes
1) l'animation d'opacité se fait après le déplacement et pas en même temps.
2) le chainage semble ne pas fonctionner... seule la dernière opération est validée!
3) j'ai meme tenté le dojo style... mais ca ne fonctionne pas... je n'arrive pas à avoir un retour au départ propre.
est ce que j'utilise mal dojo, ou est il moins bon que Jquery?
