web-dev-qa-db-ja.com

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

スクリプトを使用せずにこのシーケンスをループすることが可能かどうか。

シーケンス全体を順番にループしたいので、repeatCount="indefinite"を使用して、個々のアニメーションをループするように設定できます。

animationsvgsmil
28
serg

すでにそれを考え出した。興味のある方のためのソリューション：

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

セミコロンで区切られたリストでanimateTransform属性を指定することにより、単一のvalues内でループすることもできます。

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

例はこちら （Firefox 4.0とChromeで確認）.

30
robertc

（ミリ）秒を加算/減算することも可能です：

  begin="anim2.end-500ms"
7
Ingmar de Lange