Animation of line using Raphael.js

Question

I would like to draw a line which is animated using Raphael js.

Some thing like "L" shaped line and also inverted line shaped. these line should be slowly increase to form full form

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

enter image description here

I have done some thing here. But i want to create method which should be resuable to make different line forms. resuable methods. Since i'm new to raphael i'm still confused in were to exactly start with. — PCA, Jul 20 '15 at 07:24
I'm guessing you may want something like this... http://stackoverflow.com/questions/4631019/how-to-draw-a-vector-path-progressively-raphael-js — Ian, Jul 20 '15 at 09:42

score 2 · Answer 1 · answered Mar 14 '17 at 22:57

I was looking for a solution too, so I implemented one. This takes a list of generated path segments and draws them one by one.

You need to describe your path as a list instead of a string.

ie, instead of using "M 90,100 H90,200" use 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);
    });
}

Animation of line using Raphael.js

1 Answers1