Raphael JS 动画问题

Question

我有 3 个矩形，我试图将它们放在一个集合上然后交换它们，矩形 1 和矩形 2 之间的第一次交换工作正常，但是当我对矩形 1 和矩形进行交换时rect 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));

有什么想法吗？

这是动画：jsfiddle

谢谢！

Answer 1

问题是当您再次将 swapRect1 变换应用到黄色以使其从 2 移动到 3 时，它似乎是从原点变换。所以从中间向右移动它需要 t120,0。我重命名了变量以使其更易于理解：

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

这工作正常。我怀疑有一种方法可以让它以原点为当前位置进行动画处理。我建议查看 Snap.svg，它是由与 RaphaelJS 相同的人编写的，但它更新。只是一个旁注，因为 Snap.svg 仍在开发中，而 RaphaelJS 正在旋转 down/done。

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

Raphael JS 动画问题

Raphael JS animation issue

javascript

animation

raphael