Question

我知道有几个问题与raphael和js动画有关，但我在那里找不到任何帮助。我是js的新手，我很感激你的帮助。

我想用raphael为一些单词设置动画（用路径绘制它们）。我想画一个单词，删除它并绘制另一个单词等等。所以f.e.我想绘制（动画）单词＆＃34; CAT＆＃34;，清除它，然后动画单词＆＃34; MAN＆＃34;，清除它，动画单词＆＃34; DOG＆＃34;，清除它和动画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>

Answer 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但是这部分我不确定它是否是最好的。

如何使用raphael.js重复绘制折线

1 个答案: