Animierte Pfad mit Pfeilmarker mit Snap.svg

Question

Ich bin herauszufinden, wie ich einen Pfad mit Pfeilmarker am Ende animieren könnte. Ich versuche diagonale Linien zu animieren.

Sie können eine laufende Probe siehe hier: 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(); 

Dank!

Answer 1

ich mit Zentrierung Ihr Dreieck beginnen würde, dann werden die Dinge einfacher ...

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

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