Question

我是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)});

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

动画组的路径拉斐尔

1 个答案: