使用Raphael.js的線條動畫

我想繪製一個使用Raphael js進行動畫的線條。使用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); });

enter image description here

來源

2015-07-20 PCA

，你能否告訴我們到目前爲止你已經嘗試過的東西。 – Ian

我已經更新了代碼 – PCA

我已經在這裏做了一些事情。但是我想創建一種方法，它應該可以用來製作不同的線條形式。可重用的方法。由於我是拉菲爾新手，我仍然困惑於剛開始。 – PCA

我一直在尋找一個解決方案太多，所以我實現了一個。這需要生成的路徑段的列表並逐一繪製它們。

您需要將您的路徑描述爲列表而不是字符串。

即，而不是使用"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); 
    }); 
}

來源

2017-03-14 22:57:03 aberke

使用Raphael.js的線條動畫

回答

相關問題