代码之家 › 专栏 › 技术社区 › serg

如何循环SVG动画序列?

smil svg animation

27

serg · 技术社区 · 15 年前

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" 我想按顺序循环整个序列。

3 回复 | 直到 15 年前

1

40

serg 15 年前

我已经弄明白了。有兴趣者的解决方案:

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

2

34

robertc 15 年前

animateTransform 通过提供 values 带有分号分隔列表的属性:

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

Here's an example

3

8

Sathyajith Bhat ron tornambe 14 年前

也可以加/减(毫秒):

  begin="anim2.end-500ms"