JavaScript

レシピ

アニメーション

Web Animations APIを使う

Web AnimationsAPIを使ってアニメーションを実装する方法を解説します。

この記事のポイント

  • Web Animations APIAnimationオブジェクトKeyframeEffectオブジェクトを組み合わせて使う
  • アニメーションの内容はKeyframeEffectオブジェクトで指定する
  • KeyframeEffectオブジェクトは全体の再生時間、繰り返す回数、アニメーション開始の遅延などの設定もできる

目次

Web Animations APIについて

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

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

JavaScript コード例

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

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

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

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

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

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

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

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

続いてプロパティの値です。
JavaScriptのコード中に記述するため、数値以外は「(シングルクォーテーション)」か「(ダブルクォーテーション)」で囲った文字列形式にする必要があります。
例えばwidthプロパティ300px100%を指定するときは「‘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オブジェクトのインスタンス作成
	var keyframeeffect = new KeyframeEffect(
		content1,
		[
			{ // From
				height: '150px',
				backgroundColor: '#bedef7'
			},
			{ // To
				height: '500px',
				backgroundColor: '#007ad8'
			}
		],
		1000
	);

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

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

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

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

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

var 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オブジェクトのインスタンス作成
var 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: 配列&オブジェクト形式
var keyframeeffect = new KeyframeEffect(
	content1,
	[
		{
			height: '150px',
			backgroundColor: '#bedef7'
		},
		{
			height: '500px',
			backgroundColor: '#007ad8'
		}
	],
	1000
);


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

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

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

JavaScript コード例

// パターン1: 配列&オブジェクト形式
var 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: オブジェクト&配列形式
var 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.01.0の間で指定することができます。
例えば上記のコードでは状態1は開始時点の0%、状態2は20%、状態3は80%、状態4は終了時点の100%という内容になります。

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

KeyframeEffectオブジェクトのアニメーション再生設定

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

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

JavaScript コード例

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

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

オプション名内容初期値
delayアニメーションの開始を遅延させる。ミリ秒単位の数値で指定。0
directionアニメーションを再生する向きを指定。通常は「normal」、逆再生は「reverse」、イテレーションごとに交互に向きを変えるときは「alternate」、最初に逆再生してイテレーションごとに向きを変えるときは「alternate-reverse」。normal
durationアニメーションの再生時間。ミリ秒単位の数値で指定。0
easingアニメーションのエフィクト。文字列でlineareaseease-inease-outease-in-outcubic-bezierから指定。linear
endDelayアニメーション終了後、次のアニメーションがあるときにその開始までの遅延時間フィクト。ミリ秒単位の数値で指定。0
fillアニメーション再生前と終了後にCSSプロパティの値をアニメーションで指定した値に設定するかどうか。文字列でbackwards(アニメーション開始前にCSSを適用)、forwards(アニメーション再生後にCSSを引き継ぐ)、bothbackwardsforwardsのどちらも適用)、none(いずれも適用しない)のいずれかを指定。none
iterationStartイテレーションの開始位置。0.01.0の間で数値で指定。0.0
iterationsイテレーション(繰り返し)の回数。アニメーションを実行する回数を数値で指定するか、繰り返し続ける場合は「Infinity」を指定。1
compositeイテレーション(繰り返し)のたびに、CSSプロパティの値をどう適用していくか。置き換える「replace」、前回の値を引き継いで累積する「add」「accumulate」のいずれかを文字列で指定。「add」と「accumulate」は累積する度合いが異なる。replace
iterationCompositeイテレーション(繰り返し)のたびに、CSSプロパティの値をどう適用していくか。置き換える「replace」、前回の値を引き継ぐ「accumulate」のいずれかを文字列で指定。replace

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。