使用 Raphael.js 的线条动画答案

【问题标题】：Animation of line using Raphael.js使用 Raphael.js 的线条动画
【发布时间】：2017-03-15 06:57:03
【问题描述】：

我想画一条使用 Raphael js 动画的线。

像“L”形线和倒线形的东西。这些线应该慢慢增加以形成完整的形式

> var paper = new Raphael(document.getElementById('canvas_container'),
> 500, 500);    var line2 =
> paper.path("M200,100").attr({'stroke-linejoin':
> 'round','stroke-linecap':'round', 'stroke-width': 5 });   
> line1.animate({path:"M 90,100 H90,200"},1000, function(){
> line2.animate({path:"M200,100 V100,200"},1000);   });

【问题讨论】：

你能告诉我们你到目前为止所做的尝试吗？
我已经更新了代码
我在这里做了一些事情。但我想创建应该可以重新制作不同线条形式的方法。可重复使用的方法。由于我是 raphael 的新手，所以我仍然对如何开始感到困惑。
我猜你可能想要这样的东西...stackoverflow.com/questions/4631019/…

标签： jquery raphael

【解决方案1】：

我也在寻找解决方案，所以我实施了一个。这将获取生成的路径段列表并一一绘制。

您需要将路径描述为列表而不是字符串。

即，不要使用"M 90,100 H90,200"，而是使用pathList = [["M", 90, 100], ["H", 90,200]]

/**
Animates drawing the path on the Paper

@param {Paper} paper on which to draw
@param {array} pathList of segments to draw
@param {number} interval or time it takes to draw a segment
*/
function draw(paper, pathList, interval) {
    // set default interval
    interval = interval || 300;

    if (pathList.length <= 0) return;

    currentPath = paper.path(pathList[0]);
    drawNextPart(pathList, currentPath, 2, interval);
}


/**
Recursive subroutine that animates drawing segments of path

@param {array} pathList of segments to draw
@param {Path Object} currentPath to add segment to 
@param {number} index of next segment being drawn
@param {number} interval or time it takes to draw a segment
*/
function drawNextPart(pathList, currentPath, index, interval) {
    console.log('drawing part', index - 1, '/', pathList.length);

    if (index > pathList.length) return;

    let nextPart = pathList.slice(0, index);
    currentPath.animate({path: nextPart}, interval, function() {
        drawNextPart(pathList, currentPath, index + 1, interval);
    });
}

【讨论】：