javascript

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

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

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

[js]
setInterval(() => {

// 動的な値の変化

}, 指定ミリ秒)
[/js]

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

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

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

Web Animations API について

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

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

[js]
Element.animate()メソッドを使う方法
[/js]

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

があります。

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

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です