用raphael制作动画路径

时间:2011-08-05 14:16:37

标签: javascript raphael

我仍在努力弄清楚拉斐尔,并坚持使用一些基本动画。看看这里:http://jsfiddle.net/d7d3Z/

这很简单:两条动画到位的路径。我想要的是它似乎像一条线一样“画”这个,而不是一起开始。

如何订购动画?

2 个答案:

答案 0 :(得分:9)

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

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/

答案 1 :(得分:4)

使用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);
    });
};