使用Raphael.js的线的动画

Question

我想绘制一条使用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);   });

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