如何以不同角度重用SnapSVG动画？

Question

I am trying to create a spinner that has four arrows that move around in the shape of a square. I am using SnapSVG. I have one of the four arrows done, but now I wanted to know how to rotate the whole arrow and animation so that I don't have to repeat all of it again. My code probably isn't organized the best.

I appreciate any help.

Here is a CodePen

Here is an image of what the final spinner should look like

var s = Snap();

var line = s.path("M43.259,43.2 L144.059,43.2 L144.059,54 L54.059,54 L54.059,93.6 L43.259,93.6 L43.259,43.2 z");
var head = s.path("M144.059,72 L144.059,25.2 L184.589,48.6 L144.059,72 z M153.738,41.961 L153.738,55.178 L165.093,48.6 L153.738,41.961 z");

function lineAnimate(){
  line.animate({d: "M43.259,43.2 L183.6,42.948 L183.6,54 L54.059,54 L54,57.6 L43.259,57.6 L43.259,43.2 z" }, 500, function(){
    line.animate({d: "M75.6,43.2 L216.096,42.948 L215.941,54 L75.6,54 L71.963,54 L71.963,43.2 L75.6,43.2 z" }, 300, function(){
    line.animate({d: "M219.6,43.2 C226.8,43.2 232.666,48.096 232.666,48.096 L226.471,56.943 C226.471,56.943 223.232,53.984 219.6,54 C215.968,54.016 82.8,54 82.8,54 L82.8,43.2 C82.8,43.2 216,43.2 219.6,43.2 z" }, 100, function(){
    line.animate({d: "M226.8,43.2 C237.797,44.22 239.646,54.289 242.283,59.452 C239.697,60.647 235.526,62.579 232.281,64.052 C231,61.053 230.531,54.154 223.2,54 C219.6,54 93.6,54 93.6,54 L93.6,43.2 C93.6,43.2 219.6,43.2 226.8,43.2 z" }, 100, function(){
    line.animate({d: "M244.989,42.948 C244.989,42.948 244.989,72 244.989,72 C244.989,72 234,72 234,72 C234,72 234,54 234,54 C234,54 104.4,54 104.4,54 L104.4,43.2 C104.4,43.2 244.989,42.948 244.989,42.948 z" }, 200, function(){
    line.animate({d: "M244.989,42.948 L244.989,143.748 L234.189,143.748 L234.189,53.748 L194.589,53.748 L194.589,42.948 L244.989,42.948 z" }, 900, mina.bounce);
          });               
        });
      });    
    });
  });
};

function headAnimate(){
  head.animate({d: "M183.6,72 L183.6,25.2 L224.13,48.6 L183.6,72 z M193.279,41.961 L193.279,55.178 L204.634,48.6 L193.279,41.961 z" }, 500, function(){
    head.animate({d: "M216,72 L216,25.2 L256.53,48.6 L216,72 z M225.679,41.961 L225.679,55.178 L237.034,48.6 L225.679,41.961 z" }, 300, function(){
    head.animate({d: "M216.089,71.736 L242.932,33.4 L262.711,75.815 L216.089,71.736 z M241.247,52.681 L233.666,63.508 L246.741,64.633 L241.247,52.681 z" }, 100, function(){
    head.animate({d: "M216.096,71.644 L258.511,51.865 L254.432,98.487 L216.096,71.644 z M247.411,67.721 L235.432,73.307 L246.193,80.818 L247.411,67.721 z" }, 100, function(){
    head.animate({d: "M216,72 L262.8,72 L239.4,112.53 L216,72 z M246.039,81.679 L232.822,81.679 L239.4,93.034 L246.039,81.679 z" }, 200, function(){
    head.animate({d: "M216.189,143.748 L262.989,143.748 L239.589,184.278 L216.189,143.748 z M246.228,153.427 L233.011,153.427 L239.589,164.782 L246.228,153.427 z" }, 900, mina.bounce);
          });               
        });
      });    
    });
  });
};

lineAnimate();
headAnimate();

Answer 1

Clone the line and head variable multiple times and then use transform to rotate. After that make sure to apply the animatin to the original path and it's clones.

http://svg.dabbles.info/snaptut-transform