raphael изменить направление анимации

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

Для полноты, вы можете сделать некоторые дополнительные проверки, как только позволяют щелчок, если анимация завершена или что-то, так как может быть проблемой, если вы быстро нажмете много и буферизуете анимацию.