raphaelJS 2.1沿着路径动画

Question

我想沿着一条弯曲的路径为一条路径（实际上是一组路径，但我会做到这一点）制作动画。

RaphaelJS 2删除了animateAlong方法，原因我一直无法辨别。挖掘到拉斐尔文档的gears demo为抽象的Zevan，我有这么远：

//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翻译不会影响已经应用到给定圆的任何其他变换。这个实现是而不是保证与其他转换很好地发挥。