使用 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

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

Animated path with arrow marker using Snap.svg

javascript

svg

svg-animate

snap.svg