用raphael绘制路径动画

animating paths with raphael

本文关键字:动画 路径 绘制 raphael      更新时间:2023-09-26

我还在努力弄清楚拉斐尔,我被一些基本的动画困住了。看看这里:http://jsfiddle.net/d7d3Z/

很简单:两条路径动画到位。我想要的是让它看起来像一条线,而不是两条线一起开始。

我如何订购动画?

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

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/

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