Raphael JS动画问题
Raphael JS动画问题
提问于 2016-02-28 08:04:21
我有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));有什么想法吗？
下面是动画：小提琴
谢谢！
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-02-28 08:27:28
问题是，当您再次将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正在缩小/完成。
JSFiddle：https://jsfiddle.net/jc3w0tyz/1/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35680163
复制相关文章
相似问题
腾讯云开发者
