Fatal编程技术网
  • animation/
  • Animation 如何循环SVG动画序列？

Animation 如何循环SVG动画序列？

animation svg

Animation 如何循环SVG动画序列？,animation,svg,smil,Animation,Svg,Smil,我有一系列的动画转换： <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="30" begin="0s" dur="0.4s" fill="freeze"/> <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="30" to="0" b

我有一系列的
动画转换
：

<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="30" begin="0s" dur="0.4s" fill="freeze"/>
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="30" to="0" begin="0.4s" dur="0.4s" fill="freeze"/>
是否可以在不使用脚本的情况下循环此序列

我可以使用
repeatCount=“unfinite”
将单个动画设置为循环。我想按顺序循环整个序列。

已经解决了这个问题。为感兴趣的人提供的解决方案：

<animateTransform id="anim1" attributeName="transform" attributeType="XML" type="rotate" from="0" to="30" begin="0s; anim2.end" dur="0.4s" fill="freeze"/>
<animateTransform id="anim2" attributeName="transform" attributeType="XML" type="rotate" from="30" to="0" begin="anim1.end" dur="0.4s" fill="freeze"/>
您也可以通过提供带有分号分隔列表的
值属性，在单个
animateTransform
中循环：


<animateTransform attributeName="transform" type="rotate"
     values="0;30;0" begin="0s" dur="0.8s" fill="freeze"
     repeatCount="indefinite" />



（在Firefox 4.0和Chrome中选中）。
还可以加/减（毫秒）秒：


适用于（oold）Firefox 10，不适用于（最新）Chrome 32，只要有人遇到同样的问题。还有一些有用的链接，描述了动画计时的所有功能：，@janaspage我刚刚在这里偶然发现了values属性的文档：

  begin="anim2.end-500ms"