在 Raphael 中查找沿路径的点的位置答案

【问题标题】：Finding the position of a point along a path in Raphael在 Raphael 中查找沿路径的点的位置
【发布时间】：2011-02-02 10:24:10
【问题描述】：

我在 Raphael 中制作动画，其中涉及从 div 中出现的几条二次贝塞尔线，并沿着通往几个子元素的路径制作动画。我希望通往每个子元素的曲线能够一点一点地绘制自己，直到它们到达最后一点。我解决这个问题的方法如下：

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

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

3) 在每一帧中，使用getPointAtLength找到每条曲线的当前点

4) 在每一帧中，移动一个小点到这一点

5) 在每一帧中，lineTo 小点的新位置 - 直线，但有足够多的帧，最终结果仍然看起来不错，呈二次曲线和曲线

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

请帮忙！阅读我的信息，了解它，帮助我找到解决方案！ getPointAtLength 似乎 waaaaaaaaaaaay 太慢了 - 每帧调用一次，共 40 帧，共 7 行，这会使一切变得缓慢。任何帮助将不胜感激。

【问题讨论】：

标签： javascript animation svg raphael bezier

【解决方案1】：

Raphael 有一个内置的 animateAlong 方法 (http://raphaeljs.com/reference.html#animateAlong)。定义路径，然后让辅助对象沿着路径移动。

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

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

我知道这有点复杂，但基本上你可以计算出帮助对象在路径的每一步中走多远 (i)，然后随着计数器循环 (j) 你移动另一个沿路径的分数。

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

【讨论】：