javascript - 使用 Snap.svg 的 SVG 线条动画

Question

我确实是一个在 snap SVG 中爬行的婴儿，考虑到网上可用的资源量对于像我这样的菜鸟来说还不够，我想我应该在这里问。我想学习如何使用 CSS3 动画在 SVG 中生成这个动画，但是我最近发现，FF、IE 在 SVG 中的 CSS3 动画和 CSS3 转换方面存在一些问题，所以我只使用 webkit，我决定对其他人使用 Snap SVG，我想你知道我的意思。无论如何，这是动画的一瞥:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="711.1px" height="717.1px" viewBox="0 0 711.1 717.1" enable-background="new 0 0 711.1 717.1" xml:space="preserve">


<circle class="circle" fill="none" stroke="#FD4F00" stroke-width="66" stroke-miterlimit="10" cx="355.55" cy="358.55" r="285.956"/>

</svg>

这是 CSS3 动画:

.circle {
stroke-dasharray: 2000;
stroke-dashoffset: 2000;
-webkit-animation: dash 5s linear alternate infinite;
-webkit-transform-origin: 50% 50% ;
-webkit-transform: rotate(-90deg) ;
}
@-webkit-keyframes dash {
  from {
    stroke-dashoffset: 2000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

Here is the Fiddle, to see the Full animation in action所以你可以看到我在这里所说的内容。

感谢您的帮助，我很抱歉，因为我是 Snap SVG 的新手，我真的不知道如何实现该动画，所以我希望从这个迷你元素中学习。

编辑:好的，我已经完成了动画 Here is a Fiddle 。现在唯一的问题是，如何使用 snap.svg 调整重复计数？您能告诉我如何调整 Snap.svg 中的重复计数吗？感谢您的帮助!

Answer 1

<强> DEMO

更新

我真的很喜欢你的改进，纯 CSS。
现在，由于我不确定您需要什么帮助，所以我用您的新 fiddle 重新制作了我的答案。

因此动画运行一定的次数:

  -webkit-animation: dash 5s linear alternate 3 forwards;

注意
考虑添加所有前缀，以便您同时拥有 -wekkit-animation 和 animation，这样您就可以支持任何 webkit 浏览器。

跨浏览器
动画:

-webkit-animation: 
-moz-animation:  
-o-animation:

关键帧:

@-webkit-keyframes NAME {
    //code
}
@-moz-keyframes NAME {
    //code
}
@-o-keyframes NAME {
    //code
}
@keyframes NAME-YOUR-ANIMATION {
    //code
}

.circle {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  -webkit-animation: dash 5s linear alternate 3 forwards;
   -webkit-transform-origin: 50% 50% ;
    -webkit-transform: rotate(-90deg) ;
}
.circle1 {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  -webkit-animation: dash 5s linear alternate 3 forwards;
   -webkit-transform-origin: 50% 50% ;
    -webkit-transform: rotate(-90deg) ;
}
.circle2 {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  -webkit-animation: dash 5s linear alternate 3 forwards;
   -webkit-transform-origin: 50% 50% ;
    -webkit-transform: rotate(-90deg) ;
}
.circle3 {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  -webkit-animation: dash 5s linear alternate 3 forwards;
   -webkit-transform-origin: 50% 50% ;
    -webkit-transform: rotate(-90deg) ;
}

@-webkit-keyframes dash {
  from {
    stroke-dashoffset: 2000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="400px" height="400px" viewBox="0 0 711.1 717.1" enable-background="new 0 0 711.1 717.1" xml:space="preserve">
	 
	 
<circle class="circle" fill="none" stroke="#FD4F00" stroke-width="66" stroke-miterlimit="10" cx="355.55" cy="358.55" r="285.956"/>
<circle class="circle1" fill="none" stroke="#FD4F00" stroke-width="3.0819" stroke-miterlimit="10" cx="355.55" cy="358.55" r="233.497"/>
<circle class="circle2" fill="none" stroke="#FD4F00" stroke-width="2.8006" stroke-miterlimit="10" cx="355.55" cy="358.55" r="212.186"/>
<circle class="circle3" fill="none" stroke="#FD4F00" stroke-width="2.5572" stroke-miterlimit="10" cx="355.55" cy="358.55" r="193.744"/>
</svg>