対象のアニメーションの開始または終了を検知して次のアニメーションを開始
SVGで対象のアニメーションの開始または終了を検知して次のアニメーションを開始するには、アニメーション要素ID名.プロパティ名を使用します。
これは例えばAというアニメーションの後にBというアニメーションを連続して行いたい場合などで活躍します。
| プロパティ名 | 説明 | 使用例 |
|---|---|---|
| begin | 対象のアニメーションが開始された時。 | end="sample.begin" |
| end | 対象のアニメーションが終了された時。 | begin="sample.end" |
| repeat(n) | 対象のアニメーションの繰り返し回数がnの時。 | begin="sample.repeat(2)" |
サンプルコードとデモ
- ※ 1度しか再生されない場合がありますので、停止してしまっている場合はページの再読み込みを行ってください。
次は図形要素が1度だけ往復して移動する例です。
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 150" width="200" height="150">
<rect width="30" height="30" y="20">
<animate attributeName="x" to="170" dur="1s" fill="freeze" id="sample1" />
<animate attributeName="x" to="0" begin="sample1.end" dur="1s" fill="freeze" />
</rect>
</svg>次は図形要素が無限に往復して移動する例です。
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 150" width="200" height="150">
<rect width="30" height="30" y="20">
<animate attributeName="x" to="170" begin="0s;sample3.end" dur="1s" fill="freeze" id="sample2" />
<animate attributeName="x" to="0" begin="sample2.end" dur="1s" fill="freeze" id="sample3" />
</rect>
</svg>次は図形要素が無限に往復して移動、さらに行きだけ回転をする例です。
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 150" width="200" height="150">
<rect width="100" height="100" y="25">
<animate attributeName="x" to="100" begin="0s;sample2.end" dur="1s" fill="freeze" id="sample1" />
<animate attributeName="x" to="0" begin="sample1.end" dur="1s" fill="freeze" id="sample2" />
<animateTransform attributeName="transform" type="rotate" from="0,50,75" to="360,150,75" begin="0s;sample2.end" dur="1s" />
</rect>
</svg>次は1つ目の図形が移動し、1つ目の図形が移動し終わった後に2つ目の図形を移動、2つ目の図形が移動し終わった後に1つ目の図形を移動して無限に往復する例です。
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" width="200" height="100">
<rect width="50" height="50">
<animate attributeName="x" to="150" begin="0s;sample4.end" dur="1s" fill="freeze" id="sample1" />
<animate attributeName="x" to="0" begin="sample3.end" dur="1s" fill="freeze" id="sample2" />
</rect>
<rect width="50" height="50" fill="red" y="50" x="150">
<animate attributeName="x" to="0" begin="sample1.end" dur="1s" fill="freeze" id="sample3" />
<animate attributeName="x" to="150" begin="sample2.end" dur="1s" fill="freeze" id="sample4" />
</rect>
</svg>