Animation 设置路径组的动画Raphael

我对拉斐尔和一般的编码都是陌生的，所以在我回答这个问题时，请耐心听我说。我在拉斐尔中设置路径组的动画时遇到困难。我想要的效果是一组路径，在纸上移动时运行单个动画。以下是一个例子：

path1 = paper.path("path string").attr({fill: "#fff", stroke: "#000"});
path2 = paper.path("path string").attr({fill: "#fff", stroke: "#000"});
path3 = paper.path("path string").attr({fill: "#fff", stroke: "#000"});
pathSet = paper.set(path1, path2, path3);
pathSet.animate({transform: "t500,500"}, 1000);

path1.mouseover(function(){path1.animate({transform: "s1.6,r10"}, 1000)});
path2.mouseover(function(){path2.animate({transform: "s1.6,r10"}, 1000)});
path3.mouseover(function(){path3.animate({transform: "s1.6,r10"}, 1000)});

---

在上面的示例中，路径集将像它应该的那样设置动画，但是当我将鼠标悬停在各个路径上时，它们不仅会原地缩放和旋转，还会转换回它们的原始坐标（它们在路径集动画之前的位置）。我在文档中读到了有关转换的相对“t，r，s”和绝对“t，r，s”参数的内容，并认为这就是它们，但它们似乎没有什么区别。非常感谢您的帮助

你发现了我认为拉斐尔最大的弱点之一：变换动画很难优雅地组合在一起

这不是一个完美的解决方案，但是您可以始终使用mouseover/mouseout处理程序来追加/抵消所需的更改。例如：

path1.mouseover(function(){path1.animate({transform: "...s1.5,r10"}, 1000)});
path2.mouseover(function(){path2.animate({transform: "...s1.5,r10"}, 1000)});
path3.mouseover(function(){path3.animate({transform: "...s1.5,r10"}, 1000)});

path1.mouseout(function(){path1.animate({transform: "...s0.66,r-10"}, 1000)});
path2.mouseout(function(){path2.animate({transform: "...s0.66,r-10"}, 1000)});
path3.mouseout(function(){path3.animate({transform: "...s0.66,r-10"}, 1000)});

---

只要不需要来自任何给定元素的有状态反应，append/counter方法就可以正常工作。一旦发生这种情况，在我看来，为一类对象创建一个包装器类更有意义，它将跟踪它应该在哪里，并根据需要调整绝对变换。但是你可能不需要这样的东西。

谢谢你的回答，零。我确实考虑过使用鼠标，但是我也需要路径来做动画。我真的希望我错过了什么，但从你说的来看，这似乎是一个固有的问题。有人写过任何插件或扩展来解决这个问题吗？谢谢所以我开始考虑为元素编写一个包装器来获取/设置绝对位置，并遇到了另一个问题。在路径上设置x或y属性无效。您可以返回使用attr（）设置的内容，但路径不会移动。怎么了？那是我另一个讨厌的地方。路径的“绝对”定位是在路径本身进行编码，这正是为什么翻译如此重要（并且如此令人沮丧地受到限制）。相信我，我感觉到你的痛苦。好吧，我明白你在说什么。SVG路径字符串中的第一组坐标（以M开头）为路径中的第一个点指定“moveTo”位置。所以我猜解决方案将涉及到检索路径字符串，解析出“m”坐标，对它们执行计算，然后重新绘制路径。这似乎会对性能产生非常负面的影响。如果我偏离了基准，请纠正我的想法。谢谢我考虑的另一种解决方案是将元素分组到单独的纸张实例中，将纸张放入div中，并使用jQuery设置div的动画。很麻烦，但它会工作…并避免重新绘制路径。这样对性能更好吗？