色変え

図形の色を変えるときには animateColor 要素を使う。
attributeName 属性に変化させる図形の属性を指定し、 from, to, values 属性に変化させたい色を指定するだけでよい。 それぞれの色の間を補完しながらアニメーションしてくれるので、非常にきれいな アニメになる。

<circle id="go" cx="70" cy="70" r="40" fill="orange">
    <animateColor attributeName="fill" 
        from="orange" to="red" repeatCount="indefinite" dur="1s"/>
</circle>

開始（from）と終了（to）を指定すると、色変えが直線的になる、オレンジから赤に なめらかに変化するが、赤からオレンジに直ぐに切り替わってしまって、あまり おもしろくない。特に繰り返し回数（repeatCount）を永遠（indefinite）にしておくと、 アニメは不細工に見える
こういうといは、values 属性を使って、開始と終了の色を揃えておくとよい。 values 属性では、「;」（カンマ）を使って、いくつかの色を並べることができる。

<circle id="go" cx="70" cy="70" r="40" fill="orange">
    <animateColor attributeName="fill" values="orange;red;orange"
        repeatCount="indefinite" dur="1s"/>
</circle>

previous