Javascript 拉斐尔JS动画问题

我有3个矩形，我试着把它们放在一个集合上，然后交换它们，第一次在矩形1和矩形2之间交换很好，但是当我为矩形1和矩形3交换时，它不起作用

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

有什么想法吗

以下是动画：

---

谢谢你

问题是当您再次将

swapRect1

变换应用到黄色以使其从2移动到3时，它似乎是从原点进行变换。因此，将其从中间向右移动需要

t120,0

。我重命名了变量，以便更容易理解：

HTML:

这是正确的。我怀疑有一种方法可以让它以原点作为当前位置来设置动画。我建议你看看，这本书和拉斐尔写的是同一个人写的，但它更新了。只是一个旁注，因为Snap.svg仍在开发中，而RaphaelJS正在向下旋转/完成

---

jsFIDLE:

感谢您提供的解决方案以及您与我分享的其他信息！！我试图简化这个问题，你的答案对我正在进行的项目非常有帮助。

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

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