raphaelJS 2.1 沿路径动画

Question

我想沿着弯曲的路径制作一条路径（实际上是一组路径，但我会讲到）。

RaphaelJS 2 删除了 animateAlong 方法，原因我无法辨别。深入研究由 Zevan 抽象的 Raphael 文档的 gears demo，我已经做到了这一点：

//adding a custom attribute to Raphael
(function() {
  Raphael.fn.addGuides = function() {
    this.ca.guide = function(g) {
      return {
        guide: g
      };
    };
    this.ca.along = function(percent) {
      var g = this.attr("guide");
      var len = g.getTotalLength();
      var point = g.getPointAtLength(percent * len);
      var t = {
        transform: "t" + [point.x, point.y]
      };
      return t;
    };
  };
})();

var paper = Raphael("container", 600, 600);

paper.addGuides();

// the paths
var circ1 = paper.circle(50, 150, 40);
var circ2 = paper.circle(150, 150, 40);
var circ3 = paper.circle(250, 150, 40);
var circ4 = paper.circle(350, 150, 40);

var arc1 = paper.path("M179,204c22.667-7,37,5,38,9").attr({'stroke-width': '2', 'stroke': 'red'});

// the animation

// works but not at the right place
circ3.attr({guide : arc1, along : 1})
         .animate({along : 0}, 2000, "linear");

http://jsfiddle.net/hKGLG/4/

我希望第三个圆圈沿红色路径设置动画。 现在正在制作动画，但距离红色路径的距离等于第三个圆的原始坐标。奇怪的是，无论along 对象中的变换translate 是相对的（小写“t”）还是绝对的（大写“T”），都会发生这种情况。即使我在 animate 调用之前用变换平移推动它，它也总是在同一个位置进行动画处理。

非常感谢任何帮助。我刚在矢量陆地下船。指针很有帮助——一个工作小提琴更好。

Answer 1

你只是一个跳跃，跳过，然后跳离你想要的功能。这里的混淆涉及转换和对象属性之间的交互 ​​- 具体来说，转换不会修改原始对象属性。翻译只是添加而不是替换圆圈的原始坐标。

解决方案非常简单。在你的方法中：

this.ca.along = function(percent) {
  var box = this.getBBox( false );  // determine the fundamental location of the object before transformation occurs
  var g = this.attr("guide");
  var len = g.getTotalLength();
  var point = g.getPointAtLength(percent * len);
  var t = {
    transform: "...T" + [point.x - ( box.x + ( box.width / 2 ) ), point.y - ( box.y + ( box.height / 2 ) )]  // subtract the center coordinates of the object from the translation offset at this point in the guide.
  };
  return t;

显然，这里有一些优化空间（即，在 0,0 处创建所有圆，然后将它们转换为所需的显示坐标，避免大量迭代数学可能是有意义的）。但它的功能...see here.

另一个警告：...T 转换不会影响已应用于给定圆的任何其他变换。此实现不保证与其他转换很好地配合。