5

序章

DOM要素とDOM要素SVGの両方を使用するための基本的なアニメーション手法をいくつか知っています。だから私はこのSVGを作成しましたが、コードが多すぎない限り、x秒ごとにアニメーションをトリガーする方法を理解できません。やってみましたが、初めて待つだけです。Javascript<animate>begin="4s"

質問:

beginまたはのようなDOMプロパティがありますがdur、間隔を秒単位で定義するにはどうすればよいですか?これを達成するためのより良い方法はどれですか?

私が試したこと

<animateTransform attributeName="transform" additive="sum" attributeType="XML" 
type="rotate" dur="1s" repeatCount="indefinite" from="0 54.2 43.3" 
to="360 54.2 43.3" begin="3s" fill="freeze"/>

ここでの完全な例:SVGフィドル

ノート:

4

1 に答える 1

4
<g> 
    <rect x="0" y="0" width="30" height="20" fill="#f83"/>      
    <animateTransform id="id1" attributeName="transform" additive="sum" 
     type="scale" calcMode="linear" begin="4;id1.end+4" dur="2" keyTimes="0;1" 
     values="1 1;2 2" fill="freeze" />

</g>

ここで、アニメーションの開始はアニメーションの終了を基準にして指定されます。このようにして、アニメーションは常に指定された時間(ここでは4秒)待機し、再び再生を開始します...

これを試してみてください

アップデート

id.end + some_clock_valueの代わりにid.endを使用できる場合は、keyTimesおよびvalues属性を正しく使用し、回転アニメーションを次のanimateTransformに置き換えて、必要な出力が得られるかどうかを確認します。

<animateTransform id="id1" attributeName="transform" additive="sum" 
     type="rotate" calcMode="linear" begin="0" dur="4" 
     repeatCount="indefinite"   keyTimes="0;0.75;1" 
     values="0 54.2 43.3 ; 0 54.2 43.3 ; 360 54.2 43.3" fill="freeze" />
于 2013-01-25T18:17:39.463 に答える