如何使用 raphael.js 重复绘制多段线动画答案

【问题标题】：How to animate drawing polyline repeatedly with raphael.js如何使用 raphael.js 重复绘制多段线动画
【发布时间】：2014-11-11 14:25:53
【问题描述】：

我知道有几个与 raphael 和 js 动画相关的问题，但我在那里找不到任何帮助。我对 js 完全陌生，非常感谢您的帮助。

我想用 raphael 为一些文字制作动画（用路径绘制它们）。我想画一个词，删除它并画另一个词，等等。所以 f.e.我想绘制（动画）单词“CAT”，清除它，然后动画单词“MAN”，清除它，动画单词“DOG”，清除它并再次动画 CAT，然后是 MAN 等等。

我有两个代码正在做我想做的事情，但我无法将它们组合起来。如果您能告诉我如何一起使用它们，或者有其他方法可以完成我想做的任务，我将不胜感激。

这个使用动画和指定线条来绘制一个字母

<html>
    <head>
    <script src="raphael-min.js"></script>

    <script> 
        var c= Raphael("canvas", 200, 200);
        var p = c.path("M140 100");
        var r = c.path("M165 60");
        var s = c.path("M153 80");
        p.animate({path:"M140 100 L165 60"}, 2000, function() {
                r.animate({path: "M165 60 L190 100"}, 2000, function() {
                    s.animate({path: "M153 80 L178 80"}, 2000);
                });
        });
    };
    </script>
</head>
<body>
    <div id="canvas"></div>
</body>

这个动画线并重复它

<html>
<head>
    <style>
    #icon {
        width: 500px;
        height: 500xp;
    }
</style>

<script src="jquery-2.1.1.min.js"></script>
<script src="raphael-min.js"></script>
<script>
    $(document).ready(function() {
        var paper = Raphael("icon", 500, 500);
        var path = paper.path("M 140 100");

        var anim = Raphael.animation({path : "M 100 100 400 400"}, 1000).repeat(Infinity);
        path.animate(anim);         
    });
</script>
</head>
<body>
    <div id="icon"></div>
</body>
</html>

【问题讨论】：

你能在这里张贴一些 HTML 以便我们快速帮助你
@Prog，我编辑了代码以显示我正在使用的整个 HTML。

标签： javascript animation raphael

【解决方案1】：

假设您设法为字母设置动画，而您的问题只是一个接一个地设置动画。

你应该在集合内绘制动画，我相信这是在同一个容器内绘制和重绘的最佳方式，使用 remove（它不适用于简单的变量）。

var c= Raphael("canvas");
function a() {
  c.setStart();
  p = c.path("M140 100").attr({stroke: "#000"});
  r = c.path("M165 60").attr({stroke: "#000"});
  s = c.path("M153 80").attr({stroke: "#000"});
  p.animate({path:"M140 100 L165 60"}, 2000, function() {
    r.animate({path: "M165 60 L190 100"}, 2000, function() {
      s.animate({path: "M153 80 L178 80"}, 2000);
    });
  });
  cat = c.setFinish();
};
a();
setInterval(function() {
  cat.remove();
  a();
}, 10000);

在另一个函数之后调用一个函数的一种方法是使用 setInterval 但这部分我不确定它是否是最好的。

【讨论】：