拉斐尔改变动画方向

Question

使用 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();
    });

Answer 1

我无法让原版运行，所以这里有一些使用应该适合的主要部分的东西......

它没有很多，获取路径的长度，迭代长度，在路径上绘制对象。它使用 Raphael customAttributes 来对其进行动画处理。我添加了一个自定义切换，以便在它们之间轻松切换。

这些是关键变化..

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

jsfiddle

为了完整起见，您可能需要做一些额外的检查，例如仅在动画完成时才允许点击等，因为如果您快速点击很多并缓冲动画可能会出现问题。