CODEWITHSUNDEEP
javascriptanimationraphael
Yacine Sidi Attallah
Yacine Sidi Attallah

Reputation: 49

Raphael JS animation issue

I have 3 rectangles , and i'm trying to put them on a set and then to swap them, the first swap between the rect 1 and rect 2 works fine, but when i do it for the rect 1 and rect 3 it doesn't work ! 

var paper = Raphael("paper1", 3000,3000);       
var tabRect = paper.set();
var swapRect1 = Raphael.animation({transform:'t60,0'}, "2000", "elastic");
var swapRect2 = Raphael.animation({transform:'t-60,0'}, "2000", "elastic");

var rect1 = paper.rect(20,100,50,50).attr({fill:"yellow"});
var rect2 = paper.rect(80,100,50,50).attr({fill:"orange"});
var rect3 = paper.rect(140,100,50,50).attr({fill:"red"});
var waitTime = 2000;

tabRect.push(rect1);
tabRect.push(rect2);
tabRect.push(rect3);
tabRect[0].animate(swapRect1);
tabRect[1].animate(swapRect2);      

tabRect[0].animate(swapRect1.delay(waitTime));
tabRect[2].animate(swapRect2.delay(waitTime));

Any Ideas ?

Here's is the animation : jsfiddle

Thank's !

Upvotes: 2

Views: 109

Answers (1)

Cymen
Cymen

Reputation: 14419

The issue is when you apply the swapRect1 transform again to yellow to get it to move from 2 to 3, it appears to be transform from origin. So to move it from middle to right requires t120,0. I renamed the variables to make it easier to follow:

HTML:

<div id="paper1"></div>

JavaScript:

var paper = Raphael("paper1", 3000,3000);       
var tabRect = paper.set();
var swapRect1 = Raphael.animation({transform:'t60,0'}, "2000", "elastic");
var swapRect2 = Raphael.animation({transform:'t-60,0'}, "2000", "elastic");
var swapRectYellowAgain = Raphael.animation({transform:'t120,0'}, "2000", "elastic");

var yellow = paper.rect(20,100,50,50).attr({fill:"yellow"});
var orange = paper.rect(80,100,50,50).attr({fill:"orange"});
var red = paper.rect(140,100,50,50).attr({fill:"red"});
var waitTime = 2000;

tabRect.push(yellow);
tabRect.push(orange);
tabRect.push(red);
yellow.animate(swapRect1);
orange.animate(swapRect2);      

yellow.animate(swapRectYellowAgain.delay(waitTime));
red.animate(swapRect2.delay(waitTime));

This works correctly. I suspect there is a way to get it to animate with the origin being the current location. I would suggest looking at Snap.svg which was written by the same people as RaphaelJS but it's newer. Just a side note as Snap.svg is still being developed while RaphaelJS is spinning down/done.

JSFiddle: https://jsfiddle.net/jc3w0tyz/1/

Upvotes: 1

Related Questions