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 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();
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.