0
我正在嘗試創建一個四邊形箭頭，可以在正方形中移動。我正在使用SnapSVG。我有四個箭頭之一完成，但現在我想知道如何旋轉整個箭頭和動畫，以便我不必再重複所有的箭頭。我的代碼可能不是最好的。如何以不同角度重複使用SnapSVG動畫？
我很感激任何幫助。
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();