动画路径组拉斐尔

Question

我是 Raphael 和一般编码方面的新手，所以请耐心等待我处理这个问题。我在为 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)});

在上面的例子中，pathSet 将按照它应该的方式进行动画处理，但是当我将鼠标悬停在各个路径上时，它们不仅会缩放和旋转，而且会转换回它们的原始坐标（它们之前的位置） pathSet 动画）。我在文档中阅读了有关转换的相对“t，r，s”和绝对“T，R，S”参数的信息，并认为就是这样，但它们似乎没有什么区别。非常感谢任何帮助！

Answer 1

您已经发现了我认为是拉斐尔最大的弱点之一：变换动画很难优雅地组合！

这不是一个完美的解决方案，但您始终可以使用 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)});

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