Рафаэль. Анимация по атрибуту пути перескакивает из одного состояния в другое, без перехода

Question

У меня проблема с тем, что мне кажется совершенно безупречным простым кодом Raphael.js, чтобы анимировать путь, перемещающийся из одного места в другое, используя метод .animate() по атрибуту path:, передавая путь в новом месте.

Но вместо плавного перехода от старого пути к новому он приостанавливается на некоторое время, равное времени перехода, а затем переходит прямо к концу анимации.

Все, что я вижу в коде, похоже, соответствует документации и стандартным шаблонам, и поскольку это не сбой, а непредвиденное поведение, у меня нет сообщений или прямой обратной связи для работы.

Анимация работает, но пропускает промежуточные шаги перехода. Как почему?

---

Вот JSBIN live demo кода ...

... и вот пример кода.

var paper = Raphael("huh", '100%', '100%'); 

paper.customAttributes.pathX = function(x) { 
    var path = this.attr('path'); 
    var origin = getPathOrigin(path); 
    return { path: Raphael.transformPath(path, ['T', x - origin.x, 0 ]) }; 
}; 
paper.customAttributes.pathY = function(y) { 
    var path = this.attr('path'); 
    var origin = getPathOrigin(path); 
    return { path: Raphael.transformPath(path, ['T', 0, y - origin.y]) }; 
}; 
paper.customAttributes.pathXY = function(x,y) { 
    var path = this.attr('path'); 
    var origin = getPathOrigin(path); 
    return { path: Raphael.transformPath(path, ['T', x - origin.x, y - origin.y ]) }; 
}; 

function getPathOrigin(path) { 
    return {x: path[0][1], y: path[0][2]}; 
} 

var path = paper.path('M 100 100 L 105 105 L 95 105 L 95 95 L 105 95 L 100 100'); 

var origin = getPathOrigin(path); 

path.attr({pathX: origin.x, pathY: origin.y, pathXY: [origin.x, origin.y]}); 

path.animate({pathX: 200},1000, 'linear', function(){ 
    path.animate({pathY: 200},1000, 'elastic', function(){ 
    path.animate({pathXY: [50,50]}, 1000, 'bounce'); 
    }); 
}); 

path.animate({pathX: 200},1000, 'linear'); 

Answer 1

я понял, только перед отправкой, что проблема была из-за анимацию с использованием customAttribute, которые не были должным образом установить до начала анимации. Проводка в любом случае, поскольку эта проблема не задокументирована.

В Raphael 2.1 customAttribute s должен быть установлен с числовым значением, прежде чем они оживляются в первый раз (например, с помощью .attr(), иначе Рафаэль пытается вычислить точки промежуточных переходный «ТВИН» с помощью числовых операторов на не - нумеральные значения, такие как undefined, которые не будут работать.

(в моем случае у меня был код, который, как я думал, был бы достаточным для предотвращения этого, но у него была ошибка, которой было недостаточно, чтобы вызвать ошибку, но этого было достаточно, чтобы attr не был правильно установлен как числовое значение. Убедитесь, что attr, который вы хотите оживить, имеет числовое значение перед анимацией, которое i sn't работает)

---

Вы увидите ту же проблему, если вам удастся получить неопознанное нечисловое значение в Рафаэль атрибут затем анимировать его, или если вы найти другой способ вызвать Рафаил чтобы попытаться «tween» между числовым значением и нечисловой начальной точкой.

Working version of the code, with working customAttribute animations here.