Web Animations APIを使う

Web Animations APIについて

アニメーションの表示はCSSのtransitionプロパティやanimationプロパティを使う以外に、JavaScriptで用意されているWeb Animations APIを使って実装することもできます。

Web Animations APIはAnimationオブジェクトとKeyframeEffectオブジェクトの2つを組み合わせて使います。
具体的には、以下のようにKeyframeEffectオブジェクトでアニメーションの効果（エフィクト）を設定して、Animationオブジェクトを作成した後にplayメソッドを実行することでアニメーションを再生できます。

JavaScript コード例

window.addEventListener('DOMContentLoaded', function(){

	// (1) アニメーションの対象となるHTML要素を取得
	const content1 = document.getElementById('content1');

	// (2) KeyframeEffectオブジェクトのインスタンス作成
	let keyframeeffect = new KeyframeEffect(
		content1,
		[
			{
				height: '150px',
				backgroundColor: '#bedef7'
			},
			{
				height: '500px',
				backgroundColor: '#007ad8'
			}
		],
		1000
	);

	// (3) Animationオブジェクトのインスタンス作成
	let animation = new Animation(keyframeeffect);

	// (4) アニメーション再生
	animation.play();
});

コードの解説については後述しますが、アニメーションの効果を設定する(2)のKeyframeEffectオブジェクトは非常に重要です。
実行するアニメーションはCSSプロパティと同じように指定することができます。

ただしCSSプロパティの指定についてはいくつか注意が必要です。

まず、プロパティ名がwidthプロパティやopacityプロパティのように単語が1つのものについてはそのまま記載できますが、background-colorプロパティやpadding-leftプロパティのように2つ以上の単語がつく場合は間の「–」を取って2つ目以降の単語の頭文字を大文字にする「キャメルケース (ローワーキャメルケース)」形式です。

続いてプロパティの値です。
JavaScriptのコード中に記述するため、数値以外は「'(シングルクォーテーション)」か「"(ダブルクォーテーション)」で囲った文字列形式にする必要があります。
例えばwidthプロパティを300pxや100%を指定するときは「'300px'」や「'100%'」と記述します。

Web Animations APIの実装

今回は以下のHTMLとCSSがあることを前提にWeb Animations APIを設定して解説していきます。
「アニメーション開始」ボタンを押すと、article要素に対してKeyframeEffectオブジェクトの設定を適用してアニメーションを行います。

アニメーションのサンプルページはこちら

HTML コード例

<article id="content1">
	<h1>JavaScriptレシピ</h1>
	<a id="btn_start" class="btn" href="#">アニメーション開始</a>
</article>

CSS コード例

article {
	padding: 20px;
	width: 100%;
	height: 150px;
	box-sizing: border-box;
	background-color: #bedef7;
}
h1 {
	margin: 0 0 20px;
	padding: 0;
	font-size: 100%;
}

a.btn {
	display: inline-block;
	padding: 10px 20px;
	color: #fff;
	text-decoration: none;
	border-radius: 5px;
	background-color: #4a93cb;
}

JavaScriptコードは以下のようになります。

JavaScript コード例

window.addEventListener('DOMContentLoaded', function(){

	const btn_start = document.getElementById('btn_start');
	const content1 = document.getElementById('content1');

	// (1) KeyframeEffectオブジェクトのインスタンス作成
	let keyframeeffect = new KeyframeEffect(
		content1,
		[
			{ // From
				height: '150px',
				backgroundColor: '#bedef7'
			},
			{ // To
				height: '500px',
				backgroundColor: '#007ad8'
			}
		],
		1000
	);

	// (2) Animationオブジェクトのインスタンス作成
	let animation = new Animation(keyframeeffect);

	// (3) アニメーション開始ボタンを押したら開始
	btn_start.addEventListener('click', function(){
		animation.play();
	});
});

ページの読み込み完了時にアニメーションを設定するために、イベント「DOMContentLoaded」を検出したタイミングに全ての設定を行います。

まずはアニメーション開始ボタンとarticle要素をそれぞれid属性から取得して変数に入れます。

続いて、new KeyframeEffectコンストラクタを実行して、アニメーションの効果を設定します。
コンストラクタには以下の3つのパラメータを指定してインスタンスを作成します。

let keyframeeffect = new KeyframeEffect( element, keyframeSet, keyframeOptions);

第1パラメータのelementは対象になるHTML要素を指定します。
今回はarticle要素を対象とするので、先ほどid属性から取得した変数content1を指定します。

第2パラメータのkeyframeSetはアニメーションの効果（エフィクト）を指定します。
このパラメータは最低でも開始時点と終了時点の2つの状態をCSSプロパティ形式で指定する必要があります。

上記のコードにある「// From」は開始時点のCSSの状態、「// To」が終了時点のCSSの状態になります。
そしてアニメーションはFromからToへ向かう形で進みます。

上記の指定ではheightプロパティが「150px」から「500px」に、background-colorプロパティが「#bedef7」から「#007ad8」へと変化するアニメーションになります。

第3パラメータの「keyframeOptions」はアニメーション再生に関する設定を指定できます。
ここではアニメーション全体の再生時間1秒をミリ秒単位にした「1000」を指定しています。

ここのオプションでは再生時間以外にも開始遅延や繰り返しなどを指定することができます。
詳しくは下記「」をご覧ください。

KeyframeEffectオブジェクトに続いて、Animationオブジェクトのインスタンス作成を作成します。
ここでコンストラクタには先ほど作成したKeyframeEffectオブジェクトのインスタンスが入っている変数keyframeeffectを渡します。

// (2) Animationオブジェクトのインスタンス作成
let animation = new Animation(keyframeeffect);

最後に、「アニメーション開始」ボタンが押されたらアニメーションを開始するようイベントリスナーを登録します。

// (3) アニメーション開始ボタンを押したら開始
btn_start.addEventListener('click', function(){
	animation.play();
});

Animationオブジェクトのplayメソッドを実行することでアニメーションを開始します。

以上が基本的なWeb Animation APIの利用方法になります。
以降では、アニメーションの設定をするKeyframeEffectオブジェクトについてより詳しく解説していきます。

KeyframeEffectオブジェクトのアニメーション指定方法

KeyframeEffectオブジェクトは第2パラメータにCSSプロパティ形式でアニメーションの効果（エフィクト）を指定しますが、以下2パターンのいずれかで指定することができます。
以下の2つのパターンは同じ内容のアニメーションを指定しており、パターン1は先述したコードと同じものです。

JavaScript コード例

// パターン1: 配列＆オブジェクト形式
let keyframeeffect = new KeyframeEffect(
	content1,
	[
		{
			height: '150px',
			backgroundColor: '#bedef7'
		},
		{
			height: '500px',
			backgroundColor: '#007ad8'
		}
	],
	1000
);


// パターン2: オブジェクト＆配列形式
let keyframeeffect = new KeyframeEffect(
	content1,
	{
		height: [ '150px', '500px'],
		backgroundColor: [ '#bedef7', '#007ad8']
	},
	1000
);

今までは開始時点と終了時点の2つの状態のみ指定していましたが、中間を含めた3つ以上の状態を指定することも可能です。
以下のコードでは4つの状態を2つのパターンで設定した例になります。

アニメーションのサンプルページはこちら

JavaScript コード例

// パターン1: 配列＆オブジェクト形式
let keyframeeffect = new KeyframeEffect(
	content1,
	[
		{
			height: '150px',
			backgroundColor: '#bedef7',
			offset: 0,
			easing: 'ease'
		},
		{
			height: '500px',
			backgroundColor: '#007ad8',
			offset: 0.2
		},
		{
			height: '500px',
			backgroundColor: '#007ad8',
			offset: 0.8,
			easing: 'ease'
		},
		{
			height: '150px',
			backgroundColor: '#bedef7',
			offset: 1
		}
	],
	2000
);


// パターン2: オブジェクト＆配列形式
let keyframeeffect = new KeyframeEffect(
	content1,
	{
		height: [ '150px', '500px', '500px', '150px'],
		backgroundColor: [ '#bedef7', '#007ad8', '#007ad8', '#bedef7'],
		offset: [ 0, 0.2, 0.8, 1]
		easing: [ 'ease', 'linear', 'ease', 'linear']
	},
	2000
);

こちらも指定する形式が異なるだけでパターン1、パターン2のアニメーションは全く同じです。

指定にある「offset」は状態の位置を0.0〜1.0の間で指定することができます。
例えば上記のコードでは状態1は開始時点の0%、状態2は20%、状態3は80%、状態4は終了時点の100%という内容になります。

再生時間全体である2秒（2000ミリ秒）を100%として、状態1から始まって状態2までは0.2秒、そこから0.8秒までにかけて状態3になり、最後に再生時間の終わりまでに状態4へと変化するイメージです。

アニメーションの再生設定をする

KeyframeEffectオブジェクトの第3パラメータにはアニメーション再生のオプションとして、全体の再生時間（duration）や開始遅延（delay）、繰り返す回数（iterations）などを以下のように設定することができます。

アニメーションのサンプルページはこちら

JavaScript コード例

let keyframeeffect = new KeyframeEffect(
	content1,
	{
		height: [ '150px', '500px'],
		backgroundColor: ['#bedef7','#007ad8'],
		easing: [ 'ease', 'ease']
	},
	{
		delay: 1000,
		duration: 1000,
		fill: 'forwards',
		direction: 'alternate',
		iterations: 3
	}
);

設定できるオプションは以下の内容になります。