使用 snap svg 的旋转动画

Question

我看过关于如何通过 SMIL 创建 svg 加载动画的精彩 codepen，但我想使用 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>

如您所见，内拱的动画仍然存在一些不正确的地方，谁能帮助我理解为什么会发生这种情况，我该如何解决？

Answer 1

innerarch 路径看起来有点偏离，也许可以尝试将 y 设置为 142 左右。

只是为了替代，你也可以试试css，我想你应该能找到一些解决办法。

这是另一个与 Snap 相关的，据我所知更好一些... 这里的优点是，您可以 fiddle 使用 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 and jsfiddle2

如果您尝试使用一些值（如“40 40”）的 strokeDasharray，您将得到一些其他微调器。

使用 snap svg 的旋转动画

rotation animation using snap svg

svg

snap.svg