使用Raphael绘制路径动画

Question

我仍在努力理解Raphael，并卡在一些基本的动画上。请看这里：http://jsfiddle.net/d7d3Z/

很简单：两条路径会动画到位。然而，我想要它看起来像是“绘制”一个单独的线条，而不是同时开始。

我该如何排列这些动画呢？

- TH1981

Answer 1

在第一个动画结束后，您可以调用第二个动画。

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/

- Dogbert

Answer 2

使用回调函数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);
    });
};

- Emil Ivanov