SVGアニメーション – Web Animations API を使う

前回までの投稿では、SVG画像に対して、javascriptの setInterval を使い、以下のように書きました。

setInterval(() => {
    
    // 動的な値の変化
    
}, 指定ミリ秒)

setInterval内部で動的にDOM要素のプロパティ値を更新し、SVG画像の各要素を変更しました。

この方法はjavascriptでsetIntervalで指定したミリ秒ごとに動的な値の変化をしているだけなので、
DOMの要素は動的に変化しますが、より詳細なアニメーションを組み立てるにはやや不向きと言えます(javascriptの命令を駆使すれば可能といえば可能と思います)。

ここから先は、その方法とは別に Web Animations API を使った方法を試してみます。

Web Animations API について

Web Animations API は CSSアニメーション と CSSトランジション の技術を使い、javascriptでそれらを制御します。

アニメーションする方法は

Element.animate()メソッドを使う方法

と

Animation()コンストラクタを使い、Animationオブジェクトを生成してplayメソッドで再生する方法

があります。

それぞれの方法や、アニメーションの指定方法、等は多岐に渡るので一つ一つ試してみます。