これからのWebアニメーションを担うかもしれないWeb Animations API
UI開発者 橋本今年4月にSafariがWeb Animations APIに対応したことにより、ほぼすべての主要モダンブラウザで使用できるようになりました。
今回はそれを記念して、今後のWebアニメーションを担っていくかもしれないこのAPIを紹介します。
Web Animations APIとは
Web Animations API（以下、WAAPI）はW3Cで定義されているアニメーションの標準仕様で、CSS Transition、CSS AnimationおよびSVGを表現するために必要な機能を提供します。これにより、JavaScriptから手軽にアニメーション表現を作成できるようになっています。
現状は草案ですが、ChromeやFirefoxに続き、Safariなどもサポート対応が進んできたため、今後の展望が期待できる技術になっています。
また、未対応ブラウザに関してもPolyfillを利用することで使えるようになります。
このAPIには以下の特徴があります。
- CSS Animationとよく似た書き方ができる
- jQueryの
.animateにも似ているが、それとは対照的にブラウザに組み込まれているため、パフォーマンスが向上する - CSSを上書きすることなく、play, pauseなどの再生制御ができる
- 動的にアニメーションを作成したり、アニメーションのライフサイクルの監視ができるため、CSS Animationに比べて、さまざまな場面で使用できる
対応ブラウザ状況
| IE | Edge | Firefox | Chrome | Safari | iOS Safari |
|---|---|---|---|---|---|
| × | △ | △ | △ | ○ | ○ |
※△は部分サポート
使用方法
使用方法はとても簡単で、アニメーションをさせたい要素のanimate()メソッドを実行するだけです。
const element = document.getElementById('hoge');
element.animate([
// keyframes
], {
// options
});
メソッドの第1引数にあるkeyframesにはcssの@keyframes内の記述のようにアニメーションの流れを、第2引数のoptionsにはcssのanimationプロパティに似た値を記述します。
また、この方法だと基本的に1度だけしか実行されませんが、変数に代入することで使いまわすことができます。
const anim = element.animate();Animationオブジェクトを使用した方法
const element = document.getElementById('hoge');
const effect = new KeyFrameEffect(
element,
[keyframes],{options}
);
const animation = new Animation(effect, document.timeline)
Animationオブジェクトの第1引数にはKeyFrameEffectオブジェクトを取り、第2引数にはAnimationTimelineと呼ばれるインターフェースを取ります（現状document.timelineのみ指定可能）。
こちらはelement.animate()と違い、アニメーションが自動で実行されず、element.play()を実行する必要があります。
また、第1引数に指定しているKeyFrameEffectオブジェクトは、アニメーションをさせたい要素、keyframes, optionsの順で引数を取ります。
デモ
次のデモは、実際に上記2つの書き方で記述したボールが転がるループアニメーションになります。
See the Pen web animations api by hikaru hashimoto (@hashikaru) on CodePen.
CSS Animationとの比較
まずは記述方法の比較をしてみます。
CSS
element {
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
}
@keyframes name {
from {}
to {}
}
JavaScript
const hoge = document.querySelector('.hoge');
const keyframes = [ // keyframes部分
{ // from
animation01: 'from01',
animation02: 'from02'
},{// to
animation01: 'to01',
animation02: 'to02'
}
]
// 以下の書き方もできます
// {
// animation01:[from01, to01],
// animation02:[from02, to02]
// }
const options = { // options部分
duration: 1000,
easing: 'linear',
delay: 0,
endDelay: 0,
iterations: Infinity,
iterationStart: 0,
direction: 'alternate',
fill: 'forwards'
}
hoge.animate(keyframes, options);
以上の2つを見比べてみましょう。
名前が対応しているものやそうでないものもありますが、以下の点で異なっていることがわかります。
timing-function→easingiteration-count→iterations- 値として無限を付与する際の記述
infinite→Infinity
- 値として無限を付与する際の記述
fill-mode→fill- 数値の単位は
1s→1000ms - iterationStart：アニメーションの何秒後からスタートするか
- endDelay：アニメーション終了後から次のアニメーションまでの遅延
また、CSSでアニメーションに%指定をする@keyframes内の0% ～ 100%をWAAPIで使いたい場合は、offsetプロパティの0 ～ 1を使います。
const keyframes = [
{ // 0%
animation01: 'animation0%',
offset: 0
},{// 50%
animation01: 'animation50%',
offset: 0.5
},{// 100%
animation01: 'animation100%',
offset: 1
}
]
異なっている点はあるものの、CSS Animationを普段から使っている方であればすんなり移行できると思います。
いろいろなメソッドを活用して動かしてみる
ではここから、element.play()、element.pause()、element.reset()、element.reverse()などのメソッドに触れつつ動かしてみます。
まずはデモをご覧ください。
See the Pen web animation api by hikaru hashimoto (@hashikaru) on CodePen.
このデモでは、各ボタンにそれぞれidを付与して、それをJavaScriptでクリック時に取得してボールを動かしています。
各ボタン押下時の説明は以下の通りです。
- PLAYボタン押下時には
element.play()を実行してアニメーションの再生 - PAUSEボタン押下時には
element.pause()を実行してアニメーションの停止 - RESETボタンを押下時には
element.reset()を実行してアニメーションの初期化 - REVERSEボタン押下時には
element.reverse()を実行してアニメーションの逆再生
試しにPLAYボタンを押下していただくと、画面内のボールが3秒間かけてeasingやtransformにより左端から右端まで緩急つけるアニメーションを見ることができます。
今回はボタンで表現しましたが、もちろんJavaScriptで他の処理が終わったら再生するなどの使い方もできます。
次のデモでは、Animation.playbackRateプロパティを操作しています。
See the Pen web animations api by hikaru hashimoto (@hashikaru) on CodePen.
このプロパティではアニメーションの再生速度を設定できます。
例えば、数値の2を入れることで、アニメーションが2倍速になります。また、数値に-1を設定することで逆再生となり、element.reverse()と同じ動きになります。
このプロパティを活用することで、今まで決められた速度でしかできなかったアニメーションを、場面によって柔軟に変更できるようになりました。
あとがき
今回、WAAPIのすべての機能を紹介できませんでしたが、他にもいくつかのプロパティやイベントハンドラーが用意されているので、気になった方はぜひ調べてみてください。
また、SafariのWeb Inspectorでは今後Grapicsという項目が追加されるようです。その項目では、CSSやJavaScriptのAPIなど、どの技術を使用してアニメーションを作成したかいう点、そして個々に遅延の線とキーフレームの曲線で視覚化されるようになるようです。ツールの改善を機に、このWAAPIもよりエンジニアの間に浸透していくといいですね。