我在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中调整重复次数吗?感谢您的帮助!