使用 snap svg 的旋转动画答案

【问题标题】：rotation animation using snap svg使用 snap svg 的旋转动画
【发布时间】：2015-02-21 19:37:23
【问题描述】：

我已经看到这个精彩的codepen 关于如何通过 SMIL 创建 svg 加载动画，但我想使用 Snap SVG 库来制作相同的动画。所以我创建html如下：

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>

如您所见，内拱的动画仍有一些不正确之处，谁能帮我理解为什么会发生这种情况以及我该如何解决？

【问题讨论】：

你从哪里得到路径值？感觉中心有点不同，可能是 142 或什么的。你也愿意接受其他方法吗？
你是对的，我将 svg 水平和垂直居中并应用了相同的代码，现在它可以工作了，请发布一个答案，以便我检查它是否是正确的答案。最后一件事，你所说的替代方法是什么意思，你的意思是像 CSS 动画？是的，我也对 CSS 动画感兴趣

标签： svg snap.svg

【解决方案1】：

innerarch 路径看起来有点偏离，不妨尝试将 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，您将获得其他一些微调器。

【讨论】：