Question

我有3个矩形，我试图将它们放在一个集合然后交换它们，rect 1和rect 2之间的第一个交换工作正常，但是当我为rect 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相同的人写的，但它更新。只是旁注，因为当RaphaelJS正在旋转/完成时，Snap.svg仍在开发中。

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

Raphael JS动画问题

1 个答案: