使用 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 调整 repeatCount ？您能告诉我如何调整 Snap.svg 中的 repeatCount 吗？感谢您的帮助！

Answer 1

DEMO

更新

我真的很喜欢你的改进，纯 css。
现在，由于我不确定您需要什么帮助，因此我重新制作了答案，但使用了您的新小提琴。

所以动画会运行一定的次数：

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

Answer 2

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

http://jsfiddle.net/oc2aus6w/9/

总体思路是调用原函数作为动画结束的回调。

以下代码供那些看不到小提琴的人使用：

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();