Javascript 在拉斐尔中沿路径求点的位置

我正在用拉斐尔做一个动画，它涉及到从一个div中出现的两条二次贝塞尔线，并沿着一条通向两个子元素的路径设置动画。我想让每个子元素的曲线一点一点地画出来，直到它们到达最后一点。我的做法如下：

1） 为整个动画创建一个中心线程

2） 在每个帧中，将变量currentLength增加一定量

3） 在每个帧中，使用getPointAtLength查找每条曲线上的当前点

4） 在每个帧中，将一个小点移动到此点

5） 在每一帧中，线条都指向小点直线的新位置，但是有足够多的帧使最终结果看起来仍然很好、二次曲线

这一切都像一个绝对的魅力除了一件事-getPointAtLength似乎是缓慢的方式。我已经尝试了10种不同的方法来解决这个问题，上面提到的解决方案是迄今为止我想到的最快的一种。它们都可以工作——但是包含getPointAtLength会让它变得太慢。使用带有点的animateAlong，然后使用带有该点坐标的lineTo并没有太好的效果，首先是因为它创建的线程数量与子节点的数量一样多，而且因为它的速度也不快

---

请帮忙！阅读我的信息，理解它，帮助我找到解决方案！getPointAtLength似乎太慢了—在7行中，每40帧中，每帧调用一次，这样会使所有内容都慢到爬行。任何帮助都将不胜感激。

拉斐尔有一种内置的

动画制作方法(http://raphaeljs.com/reference.html#animateAlong). 定义路径，然后让辅助对象沿路径移动

然后，使用
onAnimation
方法(http://raphaeljs.com/reference.html#onAnimation). 此方法在动画的每一步调用一个函数，您可以定义回调函数来绘制辅助对象已到达的曲线部分（使用
getSubpath
方法）

我知道这有点复杂，但基本上你要计算出助手对象在路径上每一步走多远（
I
），然后随着计数器循环（
j
）你沿着路径移动另一个分数

我不确定拉斐尔是否会每毫秒重画一次，但应该有办法计算出动画中有多少个阶段
AnimateLong
有一个回调函数，我用它在动画完成时记录
j
，这样你就可以确切地看到有多少个动画阶段。
Raphael有一个内置的
AnimateLong
方法(http://raphaeljs.com/reference.html#animateAlong). 定义路径，然后让辅助对象沿路径移动

然后，使用
onAnimation
方法(http://raphaeljs.com/reference.html#onAnimation). 此方法在动画的每一步调用一个函数，您可以定义回调函数来绘制辅助对象已到达的曲线部分（使用
getSubpath
方法）

我知道这有点复杂，但基本上你要计算出助手对象在路径上每一步走多远（
I
），然后随着计数器循环（
j
）你沿着路径移动另一个分数

我不确定拉斐尔是否会每毫秒重画一次，但应该有办法计算出动画中有多少个阶段
AnimateLong
有一个回调函数，我用它在动画结束时记录
j
，这样你就可以确切地看到有多少个动画阶段

var p = r.path("M10,50c0,50,80-50,80,0c0,50-80-50-80,0z"),
    t = 4000, // length of timeout
    i = p.getTotalLength()/4000, // length of path to move each time
    j = 0, // counter
    p2 = r.path(),
    e = r.ellipse(10, 50, 1,1).attr({stroke: "none", fill: "#f00"}).onAnimation(function () {
        p2.attr({path: p.getSubpath(0, j*i)});
        j++;
    }).animateAlong(p, t, function() {
        console.log(j);
    });
});