анимация путей с Рафаэлем

Я все еще пытаюсь понять Рафаэля и застрял с некоторой базовой анимацией. Взгляните сюда: http://jsfiddle.net/d7d3Z/

Это достаточно просто: два пути, которые оживают на месте. Однако я хочу, чтобы она выглядела так, чтобы "нарисовать" это как одну линию, а не обе, начинающиеся вместе.

Как я могу заказать анимацию?

2 6
javascript raphael

2 ответа:

Вы можете вызвать вторую анимацию после завершения первой.

window.onload = function() {
    var c= Raphael("canvas", 200, 200);
    var p = c.path("M140 100");
    var r = c.path("M190 60");

    p.animate({path:"M140 100 L190 60"}, 2000, function() {
        r.animate({path:"M190 60 L 210 90"}, 2000);
    });


};

Http://jsfiddle.net/d7d3Z/1/

9

Используйте обратный вызов для animate: http://jsfiddle.net/pPwRP/

Что это даст вам, так это то, что он выполнит обратный вызов после завершения первой анимации.

Для ленивых нажать-вот код 

window.onload = function() {
    var c= Raphael("canvas", 200, 200);
    var p = c.path("M140 100");
    var r = c.path("M190 60");

    p.animate({path:"M140 100 L190 60"}, 2000, function () {
        r.animate({path:"M190 60 L 210 90"}, 2000);
    });
};
4