Snap.svg

Question

kullanarak bir ok işareti ile animasyonlu bir yol Sonunda ok işareti ile bir yolu nasıl canlandırabilirim anlatayım. Çapraz çizgileri canlandırmaya çalışıyorum.

Burada çalışan bir örneğini görebilirsiniz: 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(); 

Teşekkür! Ben senin üçgen ortalama başlardım

Answer 1

, işler ...

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

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