Анимация анимации Javascript

Question

Я пишу программу в Javascript с Рафаэлем, чтобы получить один путь, из которого заканчивается другой. Я пробовал несколько способов и, наконец, получил его для соединения с использованием координат BBox, поскольку линии, которые я использую, относительно прямые. Я уверен, что есть, вероятно, еще один (лучший) способ, но все, что я пробовал, не сработало.

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

Я думал, что это может быть связано с сроками, поэтому я добавил задержку, но это не сработало, хотя оно будет делать только вторую строку, если задержка на месте и достаточно длинная.

Любые предложения были бы очень оценены.

window.onload = function(){ 
var paper = new Raphael(100,0,2000,2000); 
var line1 = paper.path("m 300 400 l 100 200"); 

function lines(){ 
    line1.animate({"transform":"r102 t120 20"}); 
} 

setTimeout(function box1(){ 
    var bbox = line1.getBBox(); 
    var line2 = paper.path("m"+[bbox.x]+" "+[bbox.y2]+"l 200 100"); 
}, 1000000000000000); 

lines(); 
box1(); 

}; 

Answer 1

Я понял это сейчас. Я использовал .onAnimation для задержки рисования второй строки, и теперь она работает.

т.е.

function lines(){ 
    line1.animate({"transform":"r62t40 20"}).onAnimation(function(){ 
     var bbox = line1.getBBox(); 
     var line2 = paper.path("m"+[bbox.x]+" "+[bbox.y2]+"l 200 100"); 
    }); 
} 

Answer 2

Не совсем уверен, почему вы до сих пор анимировать. Я бы поставил их в набор и повернулся вокруг точки. Скрипки здесь http://jsfiddle.net/Lmbvm/

var paper = new Raphael(100,0,2000,2000); 
var line1 = paper.path("M300 400 l100 200"); 
var line2 = paper.path("M400 600 l200 100"); 
var set = paper.set(); 
set.push(line1, line2); 
set.transform('r50,200,200');