如何循环播放SVG动画序列？

Question

我有一系列名为animationTransform的序列：

<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="indefinite" 来设置单个动画循环，但我想按顺序循环整个序列。

- serg

Answer 1

已经想出来了。对于那些感兴趣的人，以下是解决方案:

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

- serg

---

在（旧版）Firefox 10中工作，在（最新版）Chrome 32中不起作用，只是如果有人遇到相同的问题。并且一些有用的链接描述了动画定时的所有功能：W3C SVG 1.1规范，Developer.Mozilla.org。 - Jeyekomon

Answer 2

你还可以通过提供一个使用分号分隔的列表的 values 属性，在单个的 animateTransform 内进行循环:

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

这里有一个例子（在Firefox 4.0和Chrome中测试过）。

- robertc

---

@janaspage 我刚刚偶然发现这里有关于values属性的文档：http://www.w3.org/TR/smil-animation/#ValuesAttribute - chrisM

虽然这可以完成任务，但实际上它并没有对两个动画进行排序；知道如何在SMIL中排序和重复动画会很好。 - Captain Fantastic

Answer 3

你可以添加/减去（毫）秒：

  begin="anim2.end-500ms"

- Ingmar de Lange