使用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;
  }
}

这里是代码片段，以查看完整的动画效果，你可以了解到我在这里说的是什么。

感谢您的帮助，很抱歉，我对Snap SVG非常陌生，不知道如何实现这种动画效果，所以希望通过这个小项目学习一下。

编辑：好吧，我已经完成了动画效果，这里是代码片段。现在唯一的问题是，如何使用Snap.svg来调整重复次数呢？您能告诉我如何在Snap.svg中调整重复次数吗？感谢您的帮助！

- ZubairAnwar

Answer 1

演示

更新

我真的很喜欢你的改进，纯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>

- Persijn

---

抱歉回复晚了！是的，这个有点酷。不过，我想更进一步，希望能够实现动画效果，将其重新放回原位，你懂我的意思吧？问题就在这里开始变得棘手起来。 - ZubairAnwar

你想让它向前和向后动画播放一定次数吗？ - Persijn

以固定的次数向前或向后移动一组量。 - ZubairAnwar

那是使用CSS3，但你尝试过使用Snap.svg吗？因为那才是真正的挑战所在。我一开始也尝试了同样的事情，但我意识到它不兼容跨浏览器。我试图使用Snap来获得相同的效果，但我无法做到。希望你能行。 - ZubairAnwar

你需要为动画和关键帧添加前缀，这将使其具有跨浏览器的支持。如果你想要支持IE 9和IE 10，那么有一个特殊的前缀，只需搜索“IE动画前缀”。 - Persijn

是的！@DJDavid98，Lea老师对这个问题的解决方案非常棒。我会去看一下的。谢谢！ - ZubairAnwar

Answer 2

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

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

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

以下是代码，供那些无法查看fiddle的人使用：

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

- Adam Yost