CODEWITHSUNDEEP
svgsnap.svg
Wael Showair
Wael Showair

Reputation: 3102

rotation animation using snap svg

I have seen this wonderful codepen about how to create svg loading animation through SMIL but I would like to do the same animation using Snap SVG library. So I create html as follows:

document.addEventListener("DOMContentLoaded", function(){
	
	var svgElem = document.querySelector("#loading");
	var snapCanvas = Snap(svgElem);
	var innerArch = snapCanvas.select("#inner-arch");

	innerArch.animate({transform: "rotate(360 150 150)"},
	    5000,
	    mina.linear,
	    function(){
	        innerArch.attr({ transform: "rotate(0 150 150)"});
	    });

});
<!DOCTYPE html>
<html>
<head>
	<title>Loading Animation</title>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
	<script type="text/javascript" src="main.js"></script>
</head>
<body>
<svg id="loading" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="20%" height="20%"
	 viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
<g>
	<path id="circle" opacity="0.2" enable-background="new    " d="M150,32C87.7,32,38.2,82.2,38.2,143.7
		c0,62.3,50.2,111.7,111.8,111.7s111.8-50.2,111.8-111.7S212.3,32,150,32z M150,230.7c-48,0-87-39-87-87c0-48,39-87,87-87
		s87,39,87,87C237,191.8,198,230.7,150,230.7z"/>
	<path id="inner-arch" d="M193.5,68l12.7-21.7c-16.5-9.8-35.2-15-56.2-15l0,0V56l0,0C165.8,56.8,180.8,61.3,193.5,68z	">
    <!-- <animate  type="rotate" fill="remove" repeatCount="indefinite" additive="replace" accumulate="none" restart="always" to="360 20 20" calcMode="linear" from="0 20 20" attributeName="transform" dur="0.5s" attributeType="xml">
  	</animate> -->
	</path>
</g>
</svg>

</body>
</html>

As you can see there is something still incorrect about the animation of inner arch, Can anyone help me in understanding why this happens and how can I fix it?

Upvotes: 0

Views: 6210

Answers (1)

Ian
Ian

Reputation: 13842

The innerarch path looks slightly off, maybe try setting y to be around 142 or so.

Just for alternatives, you could try css as well, I think you should be able to find some solutions.

Here is another with Snap, as I know that a bit better... The advantage here, is that you can fiddle with the strokeDasharray setting for easy quick effects.

var s = Snap("#svg");

var c = s.circle(100,100,100).attr({ stroke: 'red', strokeDasharray: "40 280", fill: 'none', strokeWidth: 20 });

function anim() {
    c.transform('r0,100,100');
    c.animate({ transform: "r360,100,100" }, 1000, mina.linear, anim);
};

anim();

jsfiddle and jsfiddle2

If you try strokeDasharray with some values like "40 40" you will get some other spinners.

Upvotes: 2

Related Questions