Question

我已经看到了关于如何通过SMIL创建svg加载动画的精彩codepen，但我想使用Snap SVG库做同样的动画。所以我按如下方式创建html：

＆＃13;

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)"});
	    });

});

＆＃13;

<!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>

＆＃13;

正如你所看到的，内拱的动画仍然存在一些错误，任何人都可以帮助我理解为什么会发生这种情况，我该如何解决？

Answer 1

内部路径略微偏离，可能会尝试将y设置为大约142左右。

只是为了替代方案，您也可以尝试使用CSS，我认为您应该能够找到一些解决方案。

这是另一个与Snap，我知道更好一点...... 这里的优点是你可以摆弄strokeDasharray设置，以便快速实现效果。

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和jsfiddle2

如果你尝试使用像“40 40”这样的值的strokeDasharray，你会得到一些其他的旋转器。

使用snap svg旋转动画

1 个答案: