ウェブアニメーションAPIとは

ウェブアニメーションのドラフトを初めて作成されたのは２０１３年の６月で決して新しい機能ではありません。基本的にはウェブアニメーションAPIはCSSアニメーションをJavaScriptにコントロールするためのAPIです。

アニメーションをJavaScriptにコントロールさせることでいくつかのメリットがありますが個人的に一番重要なのはアニメーションの開始と終了時のわかりやすさです。

普通はCSSでアニメーションを行う時にアニメーションの間隔と合わせてJavaScriptの処理を遅らせることが多いです。ここで普段はsetTimeoutがよく使われています。

ブラウザーサポート

ウェブアニメーションは新しい機能ではないため、ほとんどの最新版ブラウザーにはすでに対応されているはずです。

でも、なんとなくブラウザーがウェブアニメーションを対応していない場合はPolyfillを使ってウェブアニメーションを使うことができます。

animateファンクション

ウェブアニメーションの一番簡単な使い方は.animate()ファンクションを使うことです。.animate()ファンクションは２つの引数を受け取っています。

第一引数

第一引数にはキーフレームを指定します。値はオブジェクトかオブジェクトの配列かになります。オブジェクトの内容はCSSと同じプロパーティとなります。フォーマットはキャメルケースになります。

// 方法１
const keyframes = {
    backgroundColor: ['red', 'blue'], // 'red'は開始値で'blue'は終了値になります
        left: [0, '500px'] // '0'は開始値で'500px'は終了値になります
};

// 方法２
const keyframes = [
        {
            backgroundColor: 'red', // 'red'は開始値
                left: 0 // '0'は開始値
        },
        {
            backgroundColor: 'blue', // blue'は終了値
                left: '500px' // '500px'は終了値
        }
];

第二引数

第二引数にはアニメーションのオプションを指定します。値はミリ秒単位でのアニメーションの再生時間となる数字またはKeyframeEffect()のオプションの引数になります。

// 方法１
document.querySelector('#box').animate(keyframes, 1000); // アニメーションは１秒走ります

// 方法２
const options = {
    delay: 300, // アニメーションを遅らせる（ミリ秒単位）
        duration: 1000, // アニメーションの再生時間（ミリ秒単位）
        easing: 'ease', // アニメーションの[イージング](https://ics.media/entry/18730/)(動きの加減速)
    fill: 'forwards' // アニメーション終了した際にリセットしない
};
document.querySelector('#box').animate(keyframes, options);

合わせますと

上記を合わせますと下記の通りにCSSなしでもアニメーションを動かせます。

Animationオブジェクト

.animate()ファンクションは[Animation](https://developer.mozilla.org/ja/docs/Web/API/Animation)オブジェクトを返しています。Animationオブジェクトには３つイベントがあります。

cancel - [Animation.cancel()](https://developer.mozilla.org/ja/docs/Web/API/Animation/cancel)メソッドが呼び出されるか、アニメーションの再生状態が他の状態から "idle"へ遷移した場合に発行されます。
finish - アニメーションの再生が終了した時に発行されます。
remove - アニメーションが取り除かれた時 (すなわち、 active置換状態に遷移した時）に発行されます。

finish イベントを待つことでsetTimeoutを使わずにアニメーションが終わったとたん処理を実行することができます。

最後に

ウェブアニメーションAPIにはこちらにカバーできない機能が結構あります。もっとアドバンスなアニメーションなどもできますが、ほとんどのUIアニメーションなら上記のやり方でカバーできています。ウェブアニメーションAPIに関してもっと知りたいのであれば、この記事を書いているところに参照したサイトや記事などを書きに提供いたしますので是非読んでみてください。

Photoruction工事中！

Photoructionの開発ブログです！

JavaScriptでアニメーションを行う