web-dev-qa-db-ja.com

ループ上のSVGアニメーションの不透明度

連続ループでsvgパスの不透明度を0から100に戻し、0に戻し、100に戻したいと思います。

これまでのところ、0から100までアニメーション化することはできますが、元に戻すことはできません。

何か案は？

ありがとう

animationsvgopacity
15
John Vaughan

2つの別々のアニメーションがあります。1つは不透明度を上げるためのもので、もう1つは不透明度を下げるためのものです。それぞれはもう一方が終了したときに始まりますが、最初のものも0から始まります。長方形の例を次に示します。

<rect x="10" y="10" width="20" height="20">
    <animate id="animation1"
             attributeName="opacity"
             from="0" to="1" dur="1s"
             begin="0s;animation2.end" />
    <animate id="animation2"
             attributeName="opacity"
             from="1" to="0" dur="1s" 
             begin="animation1.end" />
</rect>
24
Peter Collingridge

次のように、values属性を使用して、任意の数の値をアニメーション化できます。

<rect x="10" y="10" width="20" height="20">
    <animate attributeName="opacity"
             values="0;1;0" dur="1s"
             repeatCount="indefinite"/>
</rect>

これにより、不透明度0から不透明度1（100％）にアニメーション化され、1秒間で再び0に戻ります。

41
Erik Dahlström