用拉斐尔动画路径

【问题标题】：animating paths with raphael用拉斐尔动画路径
【发布时间】：2011-10-20 22:16:03
【问题描述】：

我仍在尝试找出 Raphael 并坚持使用一些基本动画。看看这里：http://jsfiddle.net/d7d3Z/

这很简单：两条动画就位的路径。我想要的是让它看起来像一条线一样“绘制”它，而不是两者一起开始。

如何订购动画？

【问题讨论】：

【解决方案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/

【讨论】：

【解决方案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);
    });
};

【讨论】：