Svg 拉斐尔改变动画方向

通过使用rapheal，我成功地沿路径制作了动画，但我无法反转动画方向，，，只是如何在单击同一路径时将动画设置为另一个方向

var paper = Raphael(0,0,1024,768);

var pathOne   = paper.path(['M', 15,15 , 100,75]).attr({'stroke-width':18}).data("id",1);

//and this is just the circle
var circle = paper.circle(0, 0, 13).attr({
        fill: '#09c', cursor: 'pointer'
});

//make the path as custom attribute so it can ba accessed
function pathPicker(thatPath){
    paper.customAttributes.pathFactor = function(distance) {
            var point = thatPath.getPointAtLength(distance *     thatPath.getTotalLength());
            var dx = point.x,
                dy = point.y;
                return {
                    transform: ['t', dx, dy]
                };
            }
    }

    //initialize for first move
    pathPicker(pathOne);
    circle.attr({pathFactor: 0}); // Reset

    //Asign first path and first move
    function firstMove(){
        circle.animate({pathFactor: 1}, 1000});
    }

    pathOne.click(function(){
        firstMove();
    });

---

我无法运行原始版本，所以这里有一些使用主位的东西应该适合

没什么大不了的，获取路径的长度，迭代长度，在路径上绘制对象。它使用Raphael自定义属性来设置动画。我添加了一个自定义切换，以便于在它们之间切换

这些是关键的变化

var len = pathOne.getTotalLength();

paper.customAttributes.along = function (v) {
    var point = pathOne.getPointAtLength(v * len);
    return {
             transform: "t" + [point.x, point.y] + "r" + point.alpha
            };
};

circle.attr({ along: 0 });

function animateThere( val ) {
    val = +!val; // toggle
    pathOne.click( function() { animateThere( val ) } );
    circle.animate({ along: val }, 2000 ); 
};


pathOne.click( function() { animateThere(0) } );

---

为了完整性，您可能需要做一些额外的检查，如仅在动画完成时允许单击或其他操作，因为如果您快速单击大量动画并缓冲动画，则可能会出现问题。

您能否让它在JSFIDLE上工作，因为它不运行。我更新了代码，现在应该可以工作了。谢天谢地，它确实有效，而且非常简单。。。非常感谢