如何循环SVG动画序列？

Question

如何循环SVG动画序列？

我有序列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"/>

Run Code Online (Sandbox Code Playgroud)

如果可以在不使用脚本的情况下循环此序列？

我可以通过使用repeatCount="indefinite"我想循环整个序列的顺序设置单个动画循环.

Answer 1

ser*_*erg 36

已经弄清楚了.有兴趣的人的解决方案:

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

Run Code Online (Sandbox Code Playgroud)

即使有人遇到相同问题，它也可以在（旧）Firefox 10中运行，而在（最新）Chrome 32中不运行。还有一些有用的链接，描述了动画计时的所有功能：[W3C SVG 1.1规范]（http://www.w3.org/TR/SVG/animate.html#TimingAttributes），[Developer.Mozilla.org]（https ：//developer.mozilla.org/en-US/docs/Web/SVG/Attribute/begin）。 (2认同)

Answer 2

rob*_*rtc 31

您也可以animateTransform通过提供values带有分号分隔列表的属性在单个循环中循环:

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

Run Code Online (Sandbox Code Playgroud)

这是一个例子(在Firefox 4.0和Chrome中检查).

@janaspage我在这里偶然发现了values属性的文档:http://www.w3.org/TR/smil-animation/#ValuesAttribute (2认同)

Answer 3

Ing*_*nge 7

它也可以加/减(毫秒)秒:

  begin="anim2.end-500ms"

Run Code Online (Sandbox Code Playgroud)

归档时间：	15 年前
查看次数：	27997 次
最近记录：	11 年，6 月前