Question

我正在拉斐尔做一个动画片，它涉及从div中出现的几条二次贝塞尔曲线，并沿着朝向几个子元素的路径制作动画。我希望每个子元素的曲线一点一点地绘制自己，直到它们到达最终点。我解决这个问题的方法如下：

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

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

3）在每个帧中，使用getPointAtLength

在每条曲线上找到当前点

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

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

除了一件事之外，这一切都像绝对的魅力 - getPointAtLength似乎很慢。我尝试了10种不同的方法解决这个问题，上面提到的解决方案是迄今为止我提出的最快的解决方案。它们都有效 - 但是包含getPointAtLength会让它变得太慢。使用带有点的animateAlong然后使用lineTo和该点的坐标不是太好了，首先是因为它创建了与子节点一样多的线程，并且因为它不会更快。

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

Answer 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你沿路径移动另一部分。

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

找到拉斐尔沿路径的一个点的位置

1 个答案: