Javascript 使用Snap.SVG的SVG线条动画

我实际上是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>

.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;
  }
}

所以你可以明白我在说什么

谢谢你的帮助，我很抱歉，因为我是Snap SVG的新手，我真的不知道如何实现动画，所以我希望从这个小项目中学习

编辑：好的，我已经完成了动画。现在唯一的问题是，如何使用snap.svg调整repeatCount？您能告诉我如何调整Snap.svg中的repeatCount吗？谢谢你的帮助

更新

我真的很喜欢你的改进，纯css。
既然我不确定你需要什么帮助，我就用你的新小提琴重新制作了我的答案

因此，动画将运行设定的次数：

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

注意
考虑添加所有前缀，使您既拥有代码> WEKIT动画< /代码>和<代码>动画< /代码>，因此您对无WebKub浏览器有支持。

跨浏览器
动画：

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

关键帧：

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

.circle{
笔划阵列：2000；
行程偏移量：2000；
-网络工具包动画：破折号5s线性交替3向前；
-webkit转换来源：50%50%；
-webkit变换：旋转（-90度）；
}
.圆圈1{
笔划阵列：2000；
行程偏移量：2000；
-网络工具包动画：破折号5s线性交替3向前；
-webkit转换来源：50%50%；
-webkit变换：旋转（-90度）；
}
.圆圈2{
笔划阵列：2000；
行程偏移量：2000；
-网络工具包动画：破折号5s线性交替3向前；
-webkit转换来源：50%50%；
-webkit变换：旋转（-90度）；
}
.圆圈3{
笔划阵列：2000；
行程偏移量：2000；
-网络工具包动画：破折号5s线性交替3向前；
-webkit转换来源：50%50%；
-webkit变换：旋转（-90度）；
}
@-webkit关键帧{
从{
行程偏移量：2000；
}
到{
笔划偏移：0；
}
}

---

我知道我来晚了，但我想回答你编辑中的最后一个问题

一般的想法是调用原始函数作为动画结束时的回调

以下代码适用于看不到小提琴的人：

var s = Snap.select('#circle')
s1 = s.select('circle:nth-child(1)');
s2 = s.select('circle:nth-child(2)');
s3 = s.select('circle:nth-child(3)');
s4 = s.select('circle:nth-child(4)');

s1.attr({
      transform: 'r-90'
    });
s2.attr({
  transform: 'r-90'
});
s3.attr({
  transform: 'r-90'
});
s4.attr({
  transform: 'r-90'
});
function circleAnim() {  
    Snap.animate(2000,4000,function(value){
        s1.attr({
            'stroke-dasharray':value
        });
                s2.attr({
            'stroke-dasharray':value
        });
        s3.attr({
            'stroke-dasharray':value
        });
        s4.attr({
            'stroke-dasharray':value
        });
    },3000, null, function(){
        Snap.animate(4000,2000,function(value){
            s1.attr({
                'stroke-dasharray':value
            });
            s2.attr({
                'stroke-dasharray':value
            });
            s3.attr({
                'stroke-dasharray':value
            });
            s4.attr({
                'stroke-dasharray':value
            });
        }, 3000, null, circleAnim);    
    });
}

circleAnim();

---

很抱歉回复晚了，是的！！这有点酷，但是，我想让它领先一步，能够动画回到相同的位置，如果你知道我的意思，那才是真正的问题开始。你想让它向前和向后动画一组时间吗？没错，向前和向后移动一定的次数。这是使用CSS3，但是您是否尝试过使用Snap.svg，因为真正的挑战在于，我一开始尝试了相同的方法，但我意识到它不兼容跨浏览器。我试着用Snap获得同样的效果，但我没能做到。我希望你能。你需要为动画和关键帧添加前缀，这将为它提供跨浏览器支持。如果你想支持IE9和IE10，那么有一个特殊的前缀，只需搜索“IE动画前缀”。