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来为它设置动画。我添加了一个自定义切换按钮，以便在它们之间切换。

这些是关键变化..

~?\d+

jsfiddle

为了完整起见，您可能需要进行一些额外的检查，例如只有动画完成后才允许点击或者其他内容，因为如果您快速点击很多并且它会缓冲动画可能会出现问题。

raphael改变动画方向

1 个答案: