使用Snap.svg的箭头标记的动画路径

Question

我搞清楚如何使用箭头标记结束动画的路径。我正在尝试制作对角线的动画。

你可以在这里看到一个正在运行的样本：http://codepen.io/danieltnaves/pen/ZWryxm

var animationsPaths = new Array(); 
animationsPaths.push("M 100 10 L 200 110"); 
animationsPaths.push("M 100 10 L 230 110"); 
animationsPaths.push("M 250 110 L 300 10"); 
animationsPaths.push("M 400 110 L 600 210"); 
animationsPaths.push("M 700 210 L 800 10"); 
animationsPaths.push("M 700 210 L 850 110"); 

var paper = Snap("#paper"); 

function animatePaths() { 
    if (animationsPaths.length == 0) return; 
    var line2 = paper.path(animationsPaths[0]); 
    var lengthLine2 = line2.getTotalLength(); 
    console.log(animationsPaths); 
    animationsPaths.shift(); 

    var Triangle = paper.polyline("0,10 5,0 10,10"); 
    Triangle.attr({ 
    fill: "#000" 
    }); 

    var triangleGroup = paper.g(Triangle); // Group polyline 

    Snap.animate(0, lengthLine2 - 1, function(value) { 
     movePoint = line2.getPointAtLength(value); 
     triangleGroup.transform('t' + parseInt(movePoint.x - 15) + ',' +  parseInt(movePoint.y - 15) + 'r' + (movePoint.alpha - 90)); 
    }, 500,mina.easeinout); 


line2.attr({ 
    stroke: '#000', 
    strokeWidth: 2, 
    fill: 'none', 
    // Draw Path 
    "stroke-dasharray": lengthLine2 + " " + lengthLine2, 
    "stroke-dashoffset": lengthLine2 
    }).animate({"stroke-dashoffset": 20}, 500, mina.easeinout, animatePaths.bind(this)); 
    } 

    animatePaths(); 

谢谢！

Answer 1

我会与你为中心的三角启动，然后事情就变得更容易...

var Triangle = paper.polyline("-5,5 0,-5 5,5"); 

http://codepen.io/anon/pen/PNQXbQ