当前位置：文江博客话题详情

与 raphael 一起制作路径动画

发布于 2024-11-28 15:08:34 字数 191 浏览 2 评论 0原文

我仍在试图弄清楚拉斐尔，并被一些基本的动画所困扰。看看这里： http://jsfiddle.net/d7d3Z/

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

我如何订购动画？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

野侃 2024-12-05 15:08:34

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

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/

You can call the second animation after the first one is over.

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/

回复收藏 0 原文

爱你不解释 2024-12-05 15:08:34

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

Use a callback for animate: http://jsfiddle.net/pPwRP/

What this will give you is that it will execute the callback after the first animation has finished.

For the lazy to click - here is the code

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

回复收藏 0 原文

~没有更多了~